有时网页中的文字由于要求非常高而无法垂直显示。 这时候需要的就是将文字横向显示。 那么css 文字竖着显示，如何在网页中横向显示文字呢？ 本文将介绍css实现文本水平显示的方式。

第一种水平显示CSS文本的方式：

使用写入模式属性

句子模式：writing-mode:lr-tb 或writing-mode:tb-rl

参数：lr-tb：从左到右，从上到下； tb-rl：从上到下，从右到左。

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

css文本水平显示的效果如下：

  
  
  
      
      
  
  
  
    
中秋月
  
  

注：word-wrap:break-word;/*英文的时候需要加上这句话css 文字竖着显示，手动换行*/

说明：为文本DIV设置较小的长度，使得一行中只能排列一个文本，这样文本就会手动换行，实现竖直排版。

css文本水平显示的效果如下：

 
 
 
 
 
 
中秋月
 

css文本水平显示的效果如下：

水平显示 CSS 文本的四种方法：

使用br对文本进行换行，使文本垂直和水平显示

使用htmlbr换行标签实现文本换行，在每个文本后面添加换行br标签，使其垂直排版。

     
     
     
     
     
     
    p
h
p
中
文
网
     
    

css文本水平显示的效果如下：

本文到这里就结束了，虽然水平显示文本的方式还有很多，这里就不一一介绍了。 更多精彩内容，可以关注第一PHP社区。