实现如下内容的样式，即文字是竖向排列，并且如下图的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 便会为相关控件使用“特别的渲染逻辑”，从而兼容竖排渲染模式。