文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册 - Break易站

•   CSS 中文开发手册

  文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册

  text-combine-upright CSS属性将多个字符的组合指定到单个字符的空间中。若是组合文本宽于1em，则用户代理必须调整到1em内的内容。所获得的组合物被视为用于布局和装饰的单个直立字形。此属性仅在垂直书写模式下有效。

  这是用来产生一个在日语中称为“中横”（tate-chū-yoko）的效果，或者是以直书横向（Chinese）的方式产生的效果。

  /* Keyword values */
  text-combine-upright: none;
  text-combine-upright: all;
  
  /* Digits values */
  text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
  text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */
  
  /* Global values */
  text-combine-upright: inherit;
  text-combine-upright: initial;
  text-combine-upright: unset;

  Initial value	none
  Applies to	non-replaced inline elements
  Inherited	yes
  Media	visual
  Computed value	specified keyword, plus integer if 'digits'
  Animation type	discrete
  Canonical order	the unique non-ambiguous order defined by the formal grammar

  句法

  可能值

  none——没有特别的处理。

  all——尝试将水平方框内的全部连续字符排版，以便它们占据框的垂直线内的单个字符的空间。

  digits <integer>?——尝试显示一个连续的ASCII数字（U + 0030-U + 0039），该数字与指定的整数具备相同或更少的字符数目，从而占用垂直线框内单个字符的空间。若是省略整数，则计算出的值最大为2。范围以外的整数是无效的。

  形式语法

  none | all | [ digits <integer>? ]

  实例（数字）

  当数字被组合时，数字值(digital value)比全部值(all value)所需的标记要少，可是目前并无获得浏览器的普遍支持。

  <p lang="ja" class="exampleText">平成20年4月16日に</p>

  .exampleText {
    writing-mode: vertical-lr;
    text-combine-upright: digits 2;
    font: 36px serif;
  }

  Screenshot	Live sample
  ​	​

  实例（所有）

  all value须要标记每一个水平文本片断，但相较数字值, 目前它获得更多浏览器的支持。

  <p lang="zh-Hant">民國<span class="num">105</span
  >年<span class="num">4</span
  >月<span class="num">29</span>日</p>

  html { writing-mode: vertical-rl; font: 24px serif }
  .num { text-combine-upright: all }

  Screenshot	Live sample
  ​	​

  规范

  Specification	Status	Comment
  CSS Writing Modes Module Level 3The definition of 'text-combine-upright' in that specification.	Candidate Recommendation	Initial definition
  UnknownThe definition of 'text-combine-upright' in that specification.	Unknown	Add digits value

  浏览器兼容性

  Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
  Basic support	(Yes)-webkit1 48.0	(Yes)	48.0 (48.0)2	11.0-ms3	(Yes)-webkit1	(Yes)-webkit1
  digits	No support	?	No support4	11.0-ms3	No support	?

  Feature	Android	Android Webview	Edge	Chrome for Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
  Basic support	No support	48.0	(Yes)	48.0	48.0 (48.0)2	No support	No support	No support
  digits	?	?	?	No support4	?	?	?	?

•   CSS 中文开发手册