方式一：利用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://fly63.com/article/detial/11401