学透CSS-一次性解决text-justify，text-orientation等冷门属性文本属性（下） （连载中）

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

读不在三更五鼓，功只怕一曝十寒。看完以为有收获的，点个赞呗！！！

前言

在上中两篇介绍文本属性的时候，咱们基本已经学会了不少以前没有使用过的属性，今天咱们接着来看更多的文本属性，CSS的世界是精妙的，无尽的，仅仅但愿同这三篇文章，能够入得CSS的基础门。人生短暂，学无止尽。

text-justify

兼容性

此属性目前被列为“有风险”在候选推荐期间被丢弃。所以，不建议在生产中使用此属性，由于它不太可能在不久的未来成为全部浏览器的标准。

兼容性不好，目前也就火狐浏览器能够用！！！仅学习。

定义

规定text-align: justify;使用的对齐方式。

text-justify 必须与text-align: justify;同时出现，若是你还不知道text-align: justify;是啥，请当即阅读学透CSS-深度剖析text-align家族 文本属性（上） （连载中），看完再来看这篇文章。

属性值

auto

默认值，容许浏览器肯定对齐方式是否更好地处理为inter-word或inter-character。这在内容语言在呈现以前未知的多语言场景中颇有帮助。

inter-word

经过调整单词间距来指定文本对齐

inter-character

经过调整字符间距指定文本对齐

可能单纯的看inter-word和inter-character的截图不是太清楚，放一张对比图。

第一张：inter-character 第二张：inter-word 仔细看最明显的两处： 就不容易了 A Your worst battle is 第一张图your的字符间距是比较大的，第二章Your worst中间的间距比较大

none

禁用对齐方法。消除父元素带来的inter-word和inter-character属性

distribute

已被废除，不提倡使用

亲测在火狐浏览器表现以下

text-orientation

兼容性

浏览器的兼容仍是不错的，除了IE（永远的噩梦）

定义

在文字的书写模式为竖直的状况下，改变字符的方向。

竖直模式 writing-mode

1. writing-mode: vertical-lr;

2. writing-mode: vertical-rl;

属性值：

mixed

默认值。水平脚本中的字符顺时针旋转 90°。 仔细看截图中的英文和数字，方向是被旋转 90°.

upright

此值会将字符自己从旋转 90°旋转到其天然位置。注意这个关键字会致使全部字符被视为从左到右，也就是 direction 被强制设为 ltr(从左往右)。

sideways

垂直书写模式下的全部文本都横向显示，就像在水平布局中同样，整行顺时针旋转 90°。。

sideways-right：

某些浏览器将此值视为sideways为向后兼容而保留的值的别名。

text-combine-upright

首先我以为这个属性就是对text-orientation的一个补充，主要的做用就是想把某些字符放在一行显示，例如 上面的截图频繁出现的13，在竖直模式下，是分两行显示的。为了让他们在一行显示就须要用到这个属性了。

兼容性

火狐和谷歌兼容仍是不错的，能够用。

属性值

all

垂直包含框中全部连续的排版字符在同一行水平显示，占用垂直框中单个字符的空间。 请仔细阅读这句话！！！

all 例子1

writing-mode: vertical-lr;
      text-combine-upright: all;
      
       <p>
        我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”
        我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。
        父亲是一个胖子，走过去天然要费事些。我原本要去的，他不愿，只好让他去。我看见他戴着黑布小帽，
        穿着黑布大马褂12，深青布棉袍，蹒跚13地走到铁道边，慢慢探身下去，尚不大难。但是他穿过铁道，
        要爬上那边月台 ，就不容易了。
      </p>
复制代码

最终的效果：

是否是瞬间明白了，让你仔细阅读的缘由啦！！！

all 例子2

p{
  writing-mode: vertical-lr;
}
span{
  text-combine-upright: all;
}
 <p>
  我说道：“爸爸，你走吧。”他往车外看了看，说：“我买几个橘子去。你就   在此地，不要走动。”
 <span id="leftSpan" >202108</span>就不容易了。
 </p>
复制代码

最终的效果

这下是否是知道怎么使用了，浏览器并不会识别那些要显示在一行，须要咱们指定哪些字符显示在一行。

digits <integer>

兼容性

对于这个属性，特意放出了兼容性图。从图中看，这个属性基本无法使用

垂直包含框中全部连续的 ASCII 数字在同一行上水平显示，占用垂直框中单个字符的空间，最多为指定的整数。若是没有指定整数，则默认值为 2 位。任何低于 2 和高于 4 的都是无效的。

语法

text-combine-upright: digits 2;