[分享]css中 display 怎么让字体竖着写

在CSS中，使用display属性可以控制元素的布局方式。而今天我们要讨论的是如何使用display属性，让字体竖着写。 首先，我们需要知道CSS提供了一个特殊的值，叫做"inlineblo...

在CSS中，使用display属性可以控制元素的布局方式。而今天我们要讨论的是如何使用display属性，让字体竖着写。
首先，我们需要知道CSS提供了一个特殊的值，叫做"inline-block"。这个值可以让元素呈现出“行内块级元素”的特性。也就是说，该元素既可以像行内元素一样排列，又可以像块级元素一样控制其宽高、内外边距等属性。
在这个基础上，我们可以使用CSS3的"writing-mode"属性，来控制字体的方向。该属性有4个可能的值：horizontal-tb、vertical-lr、vertical-rl和sideways-lr。
其中，vertical-lr可以使原本水平的字体变成竖向的排列方式，而sideways-lr可以将字体倾斜90度并从上到下排列。下面是一个示例代码：

p {
   display: inline-block;
   writing-mode: vertical-lr;
} 

如上代码中，我们使用了"inline-block"将元素变成了行内块级元素，并使用了"writing-mode: vertical-lr"将字体方向改变为竖向排列。
当然，如果你想让字体呈现45度角的倾斜效果，可以使用"transform"属性来实现。具体实现方法如下：

p {
   display: inline-block;
   transform: rotate(-45deg);
   transform-origin: left top;
} 

上述代码中，我们将元素使用"inline-block"转成行内块级元素，使用"transform: rotate(-45deg)"将元素倾斜45度，并使用"transform-origin: left top"设置倾斜的起始位置在元素左上角。
通过上述方法，我们可以使用display属性，在CSS中实现字体竖向排列或者倾斜的效果。希望这些方法能对大家的CSS开发有所帮助。