CSS text-combine-upright 竖行横书组合

本文转载于http://www.deathghost.cn/article/css/86

writing-mode语法

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb：水平方向自上而下的书写方式。
vertical-rl：垂直方向自右而左的书写方式。
vertical-lr：垂直方向内内容从上到下，水平方向从左到右。
sideways-rl：内容垂直方向从上到下排列。

若以中文描述还好，但若加入阿拉伯数字，就显得怪异。

那么可否将数字转为横向（常规）书写？

下面我们重点看看CSS中的另一个属性。

text-combine-upright 竖行横书组合

text-combine-upright: none;
text-combine-upright: all;

/* Digits values */
text-combine-upright: digits;
text-combine-upright: digits 4;

/* Global values */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

none：没有特殊处理。
all：试图将元素内的字符水平排列，使其它们在竖行中占据单个字符空间。
digits：尝试显示一个连续的ASCII数字序列（U + 0030–U + 0039），该序列的字符数少于或等于指定的整数，以致于它在垂直行框中占据单个字符的空间。如果省略整数，则计算结果为2。2-4范围以外的整数无效。
值digits目前浏览器上没有看到效果，这里预先搁置。

我们要将上述文本中的数字让其横向排列，按属性值就是将其水平排列，让其占据单个字符空间。

div{
  writing-mode: vertical-rl;
  letter-spacing: 1px;
}
div b{
  text-combine-upright: all;
  margin: 5px 0;
}

  
清朝
  
是中国历史上最后一个封建王朝，
  
共传十二帝，
  
统治者为满洲爱新觉罗氏。
  
从努尔哈赤建立后金起，
  
总计296年。
  
从皇太极改国号为清起，国祚276年。
  
建立全国性政权算起为268年。