[分享]css3文本竖排

CSS3文本竖排是一种让文字垂直排列的方式，可以用于一些特殊的设计需求。具体实现方法可以使用CSS3中的writingmode属性，它有以下几种取值： writingmode: horizontalt...

CSS3文本竖排是一种让文字垂直排列的方式，可以用于一些特殊的设计需求。具体实现方法可以使用CSS3中的writing-mode属性，它有以下几种取值：

 writing-mode: horizontal-tb; /* 水平排列（默认值）*/
  writing-mode: vertical-rl; /* 从右向左的垂直排列 */
  writing-mode: vertical-lr; /* 从左向右的垂直排列*/ 

其中，vertical-rl表示从右向左竖排，而vertical-lr表示从左向右竖排。例如下面的CSS代码可以让文字从右向左竖排：

 p {
    writing-mode: vertical-rl;
    text-orientation: upright; /* 保证文字直立 */
    text-align: right; /* 文字右对齐 */
  } 

值得注意的是，中文竖排和英文竖排的方式不同。中文竖排中每个字符都是竖排的，而英文竖排中单词是横着排列的。因此，如果要实现中文垂直排列，则需要设置中文字体的竖排方式，同时还需要设置文字对齐方式、字体大小等等。例如：

 p {
    writing-mode: tb-rl; /* 中文竖排 */
    font-family: 'SimSun'; /* 设置中文字体 */
    text-align: center; /* 设置文字居中对齐 */
    font-size: 24px; /* 设置字体大小 */
  } 

总的来说，CSS3文本竖排是一种实现特殊排版效果的方式，通过设置不同的属性可以实现从左向右或从右向左的中英文竖排，具有很大的灵活性。