html中文案竖排怎么写,做了这个活动，感觉自己成了垂直排版css大师（文字竖排）...

前段时间协助完成作家的盘点活动，设计大大给的视觉稿如下图。最初拿到稿子时，以为是一个简单的常规活动，实际在完成这个活动的过程中有一点点小波折，自己也在这个过程中学习到了关于垂直排版的知识点，下面来跟大家描述做这个活动的心路历程，一起探索垂直排版的奥秘~

文字竖排🤔，立马想到使用 writing-mode，改变文字展示的行进方向

大家都知道的writing-mode

writing-mode 可以将文档流由水平方向调整为垂直方向

以p标签内的一段文本为例，对其添加 writing-mode: vertical-rl，可以快速实现如下图所示的文字竖排效果

p标签示例代码如下：

爱交流，也爱独处

.text-vertical {

writing-mode: vertical-rl;

}

一顿页面基础布局下来，可以看到页面效果和设计稿还是有差异😔，具体如下图的红色框线内；设计稿中红色框线内的数字是“直立向上”展示的

感觉页面还原的展示也无伤大雅，于是拿着对比图找设计大大沟通；但是设计大大还是比较坚持视觉稿上的数字展示效果，以便更好传达活动内的关键信息(用户不需要旋转手机 or 侧头即可快速看清数据

在纠结更好实现方案的时候，去请教了一下张老师，张老师提示