由靈簽樣式css3文字豎向排列遇到數字要橫排的思路

實現如下內容的樣式，即文字是豎向排列，并且如下圖的35這個數字，要將其變成橫向排列。

想要方案豎向排列，需要用到css3的writing-mode:vertical-rl;//即豎直廣告，從右到左的方式

.qqbox-text{writing-mode: vertical-rl; /* 文字從上到下，從右到左 */}

但這樣寫一個奇怪的問題，就當中我們有一個35，我們要單獨把這個數字區域拿出來，如下圖，我們如果不把35這個數字單獨設置，將出現如下的排版，則非常影響閱讀體驗。

所以，我們要把這個35數字，單獨放在一個盒子里面，并且修改它的writing-mode屬性，讓其恢復正常即可。

這樣就可以實現，文字豎排，并且數字橫向，不影響閱讀。

writing-mode屬性,這在我們寫古詩句的時候，非常有用。
horizontal-tb://默認模式，從左到右，從上到下

vertical-rl://從上到下，從右到左

vertical-lr://從上到下，從左到右

SS實現文字豎向排版的簡單方法，bootstrap4文字豎向排版代碼：

主要用到的CSS屬性：writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE瀏覽器*/，英文字符加上這句：word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/

效果圖：

代碼如下：

T之家 3 月 25 日消息，在瀏覽器互通項目 Interop 2023 的倡議下，目前業界主流瀏覽器都開始統一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。

IT之家注：垂直表單控件主要用于呈現豎排文字，雖然此前 CSS 已經在書寫模式屬性中添加了豎排文字的支持，不過許多瀏覽器對表單控件 vertical-lr 和 vertical-rl 值都采用不同的標準，因此在先前的 Interop 2023 會議中，各廠商一致決定實現統一的垂直表單控件支持。

▲ 豎排文字示例

在布局方面，目前 WebKit 中的表單控件大量使用自定義布局代碼，以在不同的環境和條件下保持一致和功能性，但此類布局代碼主要基于橫排模式設計，在豎排模式下會出現問題。

開發團隊在 Safari 17.4 版本中改進了相關代碼，在代碼計算邏輯寬度時會同時考慮豎排模式，同時也改進了自定義基線調整邏輯功能，使復選框和單選按鈕等控件能與豎排文字相搭配。

開發人員重點談到了 macOS 平臺 Safari 瀏覽器的改進，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會直接旋轉這些控件來支持豎排渲染。

不過有些擁有陰影的控件（例如 <select> ）無法單純通過旋轉來契合豎排模式，在遇到此類特定控件時，WebKit 便會為相關控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。