让文字纵向排列

一般来说,我们输入的文字都是横向排列的。那如何让文字纵向排列呢?像这样

方法一

直接贴图片,把文字以及相关样式交个设计师,让他帮忙做出一张图片,贴上即可。但这有点浪费人力。

方法二
使用<br>标签。
<div>
    会<br>场<br>导<br>航
</div>

如图中所示,使用br标签确实可以让文字纵向排列。不过未免太麻烦了点,若是有100个文字就需要使用99个<br>标签。所以这种方法果断抛弃之~~

方法三
将容器的宽度和文字的字体大小设置成一样
.demo{
  font-size:24px;
  width:24px;
}
<div class="demo">
   会场导航
</div>

此方法,在IE(8)、Chrome和Firefox上都有测试,该方法可行。
Chrome可以显示的最小字体是12px,Firefox可以显示的最小字体是1px,当设置的字体小于浏览器可以显示的最小字体时,文字无法显示。

经过测试得知,只要容器的宽度width小于font-size的二倍,文字就能纵向排列(每行一个文字)。
若要让每列2个文字,则容器的宽度width>=font-size的二倍, 容器的宽度width<font-size的二倍  。以此类推。

缺点:当有多列文字时,该方法就没什么用了。
方法四

使用writing-mode属性

writing-mode:horizontal-tb | vertical-rl | vertical-lr 

分别是:文字正常显示;文字纵向排列,从右至左; 文字纵向排列,从左至右


         
.write-mode{
  height:100px;
  writing-mode:vertical-rl;
}
<div class="write-mode">
   怎么回事,明明很简单啊,不应该啊怎么会这样呢,我的神啊我的神啊,
</div>


总结
这4种方法中,方法四(writing-mode)是最好的,浏览器兼容性不错,实现也简单  













发布了31 篇原创文章 · 获赞 12 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览