css让文字纵向显示

2024-08-16 16:29:02 编程来源：ZONE.CI 全球网 0 阅读模式

在网页设计中，为了让页面更具有吸引力，文字排版显得尤为重要，而css中有一个很有趣的特性，能够让文字与我们平时所见不同的排列方式，那就是纵向显示。

想让文字在网页中纵向显示，需要使用css中的writing-mode属性，有以下几种属性值：

writing-mode: horizontal-tb;   /* 水平方向 */ 
writing-mode: vertical-rl;    /* 垂直并且文字由右向左排列 */ 
writing-mode: vertical-lr;    /* 垂直并且文字由左向右排列 */

以下是样例代码，将文字以垂直方向展示：

 <!DOCTYPE html> 
  <html> 
    <head>
      <style> 
        p { 
          writing-mode: vertical-rl;   
          text-orientation: mixed; 
          font-size: 20px; 
        } 
      </style> 
    </head> 
    <body> 
      <p> 
        这里的文字将以垂直方向展示 
      </p> 
    </body> 
  </html>

可是，仅仅使用writing-mode是不够的，垂直方向的文字会默认向右旋转90度，字体的方向不符合我们的需求，这时需要加上text-orientation属性，并将这个属性的值设置为mixed。这样一来，文字就可以正确显示啦！

除此之外，还可以通过自定义CSS，对于文字的排布进行具体的调整，比如设置行高、字间距等等，从而定制化自己的风格。