4

css实现文字垂直展示的方法总汇

 2 years ago
source link: https://www.fly63.com/article/detial/11401
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

更新日期: 2022-04-28阅读量: 313标签: 文字分享

扫一扫分享

方式一：利用writing-mode属性

在css中，可以利用“writing-mode”属性设置文字垂直显示，只需要给文字元素添加“{writing-mode:vertical-rl; }”或者“{writing-mode:vertical-lr; }”样式即可。

writing-mode有以下几个属性值：

  • horizontal-tb: 水平展示，也就是横着展示文字，最平常默认的样式
  • vertical-rl：垂直展示，也就是上面图片上实现的样式
  • vertical-lr：垂直展示，根据内容从上到下排列，和上面的属性一般是兼容替换
  • sideways-rl：根据内容垂直方向从上到下排列
  • sideways-lr:  根据内容垂直方向从下到上排列，和上面的属性一般是兼容替换

代码实现：

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 html 文档应该在 html 元素上设置）
<div class="box">
前端开发网
</div>
<style>
.box {
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	letter-spacing:5px;
}
</style>

效果如下：

前端开发网

注意：如果需要调节字与字之间的距离时候，line-height 是无效的，需要用 letter-spacing 这个改变字间距

方式二：设置元素宽度

设置元素的宽度，只能显示一个字体的宽度。比如：

<div class="box">
	前端开发网
</div>
<style>
.box {
	width: 20px;
	font-size: 16px;
	padding: 2px;
}
</style>

这里的盒子宽度只有20px，一行只能排列一个文字，就达到了换行展示效果。

方式三：使用br换行

使用br换行（不推荐使用），举个例子：

<div class="box">
	前<br>端<br>开<br>发<br>网
</div>

这样操作是比较麻烦的，而且如果是动态数据就很麻烦，总不能在拿到数据后循环在每个字后面加br实现吧！还是推荐使用方式一来实现。

链接: https://www.fly63.com/article/detial/11401


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK