我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css实现文字竖排显示的方法

这篇文章给大家分享的是有关css实现文字竖排显示的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,小程序制作,10多年建站对成都酒店设计等多个领域,拥有多年的网站设计经验。

css文字竖排显示的方法一:

使用writing-mode属性

语法:writing-mode:lr-tb或writing-mode:tb-rl

参数:lr-tb:从左向右,从上往下;tb-rl:从上往下,从右向左。

  
  
  
    test  
      
  
  
  
    
十轮霜影转庭梧,此夕羁人独向隅。 未必素娥无怅恨,玉蟾清冷桂花孤。

css文字竖排显示效果如下:

css实现文字竖排显示的方法

这种方法兼容性不好,只有在IE浏览器中才能支持,所以并不推荐使用,这里就不过多介绍要想了解更多可以参考css在线手册。

css文字竖排显示的方法二:

对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。

  
  
  
    test  
      
  
  
  
    
中秋月

注意:word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/  

说明:对文字DIV设置较小的宽度,以达到一排只能排下一个文字,这样文字就自动换行,实现垂直竖列排版。

css文字竖排显示的效果如下

css实现文字竖排显示的方法

css文字竖排显示的方法三:

推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁

 
 
 
 
 
 

中秋月

css文字竖排显示效果如下:

css实现文字竖排显示的方法

css文字竖排显示的方法四:

使用br换行让其文字垂直竖排显示

利用html br换行标签实现文字换行,对每个文字后加上换行br标签让其竖列排版。

     
     
     
     
     
     
    亿

感谢各位的阅读!关于css实现文字竖排显示的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文名称:css实现文字竖排显示的方法
新闻来源:http://mswzjz.cn/article/ijjjds.html

其他资讯