您的位置:首页 > CSS技巧 > 【 返回上一页

css文字竖排显示 文字垂直布局

div css文字竖排 CSS文字竖立显示CSS文字从上到下垂直显示CSS文字垂直排版布局篇

在CSS中CSS样式属性writing-mode:tb-rl是设置文字垂直显示竖排的,但是不兼容浏览器,在谷歌浏览器中兼容,在低版本IE不兼容,所以一般放弃使用writing-mode排版文字竖排显示属性使用。

竖立垂直显示效果截图
竖立垂直显示效果截图

ThinkCSS这里推荐两种方法来实现文字字体从上到下垂直竖立排版。一种,使用br换行标签,另外一种控制div宽度实现一排只显示一个文字实现自动换行排版。

一、使用<br>换行标签实现竖排垂直显示

一个文字跟一个html br换行标签,达到换行后形成垂直竖排效果。如果要调整上下文字间距使用line-height行高控制即可。

1、html br实现文字竖排实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>html br换行实现文字竖立垂直排版 ThinkCSS</title> 
  6. <style> 
  7. .exp-a{line-height:18px} 
  8. .exp-b{line-height:30px} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="exp-a"> 
  13. <br /><br /><br /><br /><br /> 
  14. <br /><br /><br />版 
  15. </div> 
  16. <div class="exp-b"> 
  17. <br /><br /><br /><br /><br /> 
  18. <br /><br /><br />版 
  19. </div> 
  20. </body> 
  21. </html> 

每个字一个br换行标签,同时设置line-height调节上下字间距。

2、html br实现文本竖立排版效果截图

css br实现文字竖排从上到下垂直显示
css br实现文字竖排从上到下垂直显示

二、CSS控制对象盒子宽度实现文字自动换行达到竖立显示

使用css让div宽度刚刚能放下一个文字,这样实现文字自动换行效果 实现垂直排版效果。当然也是有line-height调节文字字体上下间距。

1、实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>css 实现文字竖立垂直排版 ThinkCSS</title> 
  6. <style> 
  7. .exp-c{ width:18px;line-height:20px} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="exp-c"> 
  12. 让文字竖立垂直排版 
  13. </div> 
  14. </body> 
  15. </html> 

设置div宽度为18px,刚刚一排能放下一个汉字,这样既可实现每个文字自动换行,同时通过css 行高属性设置上下文字间距。

2、css 文字文本字体垂直竖排显示实例截图

CSS实现文字垂直排版 竖排显示实例截图
CSS实现文字垂直排版 竖排显示实例截图

三、CSS文本文字垂直竖排竖立显示总结

无论哪种方式实现文字竖排,其实实际布局中可能需要在制作中根据需求调整css 字体大小,文字上下间距根据需求实现文字竖排效果。

相关标签: 垂直 竖立 竖排
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/jiqiao/1022.shtml

日期:2016-08-10 10:50 www.thinkcss.com ThinkCSS