本文介紹一個大家可能不太了解的CSS屬性，text-combine-upright。

一、從垂直排版說起
垂直排版（writing-mode:vertical-lr）默認(rèn)效果如下。

垂直排版效果

可以看到上面垂直排版段落中的數(shù)字都是90度旋轉(zhuǎn)排列的。

這樣的排列并不利于閱讀，希望可以橫著排列，此時大家可能會想到使用text-orientation屬性，例如，在容器元素上設(shè)置：

p {
    text-orientation: upright;
    writing-mode: vertical-lr;
}
會有如下所示的效果：

text-orientation:upright效果示意

上面的數(shù)字雖然正立了，但是閱讀起來還是有些吃力，尤其2021，閱讀速度還不如默認(rèn)的90度旋轉(zhuǎn)排列的效果呢。

如果希望里面的數(shù)字都橫過來排列，則可以試試text-combine-upright屬性。

一、text-combine-upright簡介
text-orientation屬性可以讓垂直排版中的局部區(qū)域的文字水平排版，同時多個水平排版字符占據(jù)的寬度和一個正常的字符一樣。

text-combine-upright屬性支持下面這些屬性值：

/* 關(guān)鍵字值 */
text-combine-upright: none;
text-combine-upright: all;

/* 數(shù)字值 */
text-combine-upright: digits;     /* 按照2個數(shù)字算 */
text-combine-upright: digits 4;  
其中：

none
初始值。不連續(xù)橫排。
all
試圖水平排版框內(nèi)所有連續(xù)字符，使它們占用框垂直線內(nèi)單個字符的空間。
digits <integer>?
多少個連續(xù)數(shù)字認(rèn)為是橫著顯示。默認(rèn)是2，范圍不能在2-4之外，否則認(rèn)為是不合法。也就是最多只能讓一個標(biāo)簽內(nèi)4個字符水平排列。
然后digits 2這樣的語法其實很厲害，下圖就是MDN文檔上示意的理論狀態(tài)下digits 2的排版效果：

p {
    writing-mode: vertical-lr;
    text-combine-upright: digits 2;
    font: 36px serif;
}
digits 2效果示意

然而，根據(jù)我的實際測試，目前，Chrome 88以及Firefox 85以及Safari都不支持這個高級的語法。

因此，我們只能使用text-combine-upright:all進(jìn)行水平排版，已知有如下HTML和CSS：

<p class="upright">我叫中山網(wǎng)站建設(shè)，<span>2021</span>年<span>2</span>月<span>18</span>日我<span>36</span>歲</p>
.upright {
    writing-mode: vertical-lr;
}
.upright span {
    text-combine-upright: all;
    /* forSafari */
    -webkit-text-combine: horizontal;
    text-combine-upright: digits 2;
}
效果如下截圖：

text-combine-upright效果截圖

眼見為實，您可以狠狠地點(diǎn)擊這里：text-combine-upright與垂直排版demo

和普通水平排版的區(qū)別
重置span元素的排版方式也是可以讓數(shù)字橫向排列，例如：

.upright {
    writing-mode: vertical-lr;
}
.upright span {
    writing-mode: initial;
}
但是，這個水平排版所占據(jù)的寬度是每個字符累加的寬度，而不是單個字符寬度，例如下圖箭頭示意：

重置writing-mode后的排版

而text-combine-upright實現(xiàn)的水平排版，則是會讓2~4個字符（包括中文）全部所在一個字符寬度中。

三、IE和Safari的兼容
text-combine-upright屬性的兼容性如下表所示：

text-combine-upright兼容性

其中：

IE瀏覽器使用的是-ms-text-combine-horizontal這個屬性，語法如下所示：

-ms-text-combine-horizontal: none | all | [ digits <integer> ? ]
和text-combine-upright屬性一致。

然后Safari瀏覽器使用的是-webkit-text-combine屬性，僅支持none和horizontal這兩個屬性值。

因此，實際使用的代碼會是下面這樣的：

.target {
    -ms-text-combine-horizontal: all;
    -webkit-text-combine: horizontal;
    text-combine-upright: all;
}
下面就是上面的demo頁面在IE11瀏覽器下的效果：

IE11瀏覽器下效果

可以看到單個數(shù)字的時候，字形變得寬大厚重了，這個是和其他現(xiàn)代瀏覽器不一樣的表現(xiàn)。

四、水平排版中的應(yīng)用
text-combine-upright屬于小眾CSS屬性，實用的場景有限，首先需要垂直排版，然后目標(biāo)應(yīng)該是數(shù)字或者字符長度不超過4個詞組，這樣一看，也就年月日的顯示需要這樣了。

但是，如果我們脫離排版，以布局的角度思考這個屬性。

那就可以實現(xiàn)任意2~4個字符按照1個字符寬度渲染排版的效果，這個說不定會讓text-combine-upright屬性迸發(fā)出全新的生命力。

舉個例子，“大家好，我叫中山網(wǎng)站建設(shè)，簡寫為zswzjs”，這句話中的'zswzjs'現(xiàn)在是3字符寬度，使用text-combine-upright可以讓其最多占據(jù)一個字符寬度。

大家好，我叫中山網(wǎng)站建設(shè)，簡寫為<my-name>zswzjs</my-name>。
my-name {
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -ms-text-combine-horizontal: all;
    -webkit-text-combine: horizontal;
    text-combine-upright: all;
}
實時渲染效果如下所示（如果無效果，可能訪問的是盜版）：

大家好，我叫中山網(wǎng)站建設(shè)，簡寫為zswzjs。

這么一看，text-combine-upright是不是還有挺有用的？脫離了垂直排版，可以讓特殊名詞合并顯示，例如S*，TMD等。

——END——

　　更多網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計等相關(guān)內(nèi)容，歡迎您咨詢中山網(wǎng)訊科技！
　　
責(zé)任編輯：中山網(wǎng)站建設(shè)
     【網(wǎng)訊網(wǎng)絡(luò)】國家高新技術(shù)企業(yè)》十二年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進(jìn)銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://www.denorpool.com