css中怎么让字竖着

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中怎么让字竖着?这是一道比较有趣的问题。其实,在CSS中,我们可以使用writing-mode属性来实现字竖着的效果。该属性有四个值可以选择:horizontal-tb、vertical-rl、

CSS中怎么让字竖着?这是一道比较有趣的问题。其实,在CSS中,我们可以使用writing-mode属性来实现字竖着的效果。
该属性有四个值可以选择:horizontal-tb、vertical-rl、vertical-lr和sideways-lr。其中,vertical-rl和vertical-lr可以实现竖排文字的效果。
例如,我们可以使用以下代码来让段落中的文字竖排:
<br> <br>
        p {<br>
          writing-mode: vertical-rl;<br>
          text-orientation: mixed;<br>
        }<br> 

上面的代码将会使p标签中的文字从右往左竖排,同时保持每个字的正常方向。
除此之外,我们也可以使用transform属性来达到类似的效果,如下所示:
<br> <br>
        p {<br>
          transform: rotate(-90deg);<br>
          transform-origin: top left;<br>
          white-space: nowrap;<br>
        }<br> 

这个代码将会旋转p标签中的文字,并且让它竖直排列。需要注意的是,我们需要把text-align属性设置为left,否则文字将会居中对齐。
总的来说,虽然竖排文字看起来不如横排文字舒适,但是在一些排版需要特定效果的情景中,竖排文字仍然是一个不错的选择。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么让字竖着

粉丝

0

关注

0

收藏

0

已有0次打赏