您现在的位置是：网站首页> 编程资料编程资料

css实现文字竖排的方式(小结)使用CSS实现文字的竖排的简单方法css实现文字竖排效果示例代码

2023-10-19 517人已围观

简介这篇文章主要介绍了css实现文字竖排的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。

单行文字竖向排列

 .onecn{ width: 20px; margin: 0 auto; line-height: 24px; }

 .oneen{ width: 15px; margin: 0 auto; line-height: 24px; font-size: 20px; word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ word-break:break-all; }

说明：实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。

多行文字竖向排列

 .two{       margin: 0 auto;       height: 140px;       writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/     writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/   }

说明：高度很重要，如果需要控制文字的间距和行距，可以添加属性letter-spacing和line-height。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：20个让你效率更高的CSS代码技巧(整理)提高CSS代码效率的编写技巧CSS代码编写的一些性能优化技巧总结CSS3 实用技巧：实现黑白图像效果示例代码网页设计中HTML代码、CSS代码和javascript的技巧和细节关于CSS Hack与float闭合的CSS技巧清除浮动代码CSS小技巧导航中鼠标经过变换文字的实现代码CSS 代码质量提高的10条实用技巧帮我写出更好的CSS代码的一些技巧可读性CSS代码编写的小技巧CSS技巧：改善代码可读性并简化代码管理-CSS教程-网页制作-网页教学网

下一篇：什么是BFC？ CSS 使用伪元素清除浮动的方法CSS 列表模型之marker标记的使用浅谈CSS 伪元素&伪类的妙用CSS :befor :after 伪元素的巧妙用法CSS3中伪元素::before和::after的用法示例CSS 伪元素::marker详解

您现在的位置是：网站首页> 编程资料编程资料

css实现文字竖排的方式(小结)使用CSS实现文字的竖排的简单方法css实现文字竖排效果示例代码

相关内容

点击排行

本栏推荐

猜你喜欢