想要把文本垂直排列，并且每一列套上一个红框，可以用纯css做吗？

Question

其他的估计有办法解决，难题就是如何在行末和行首如何设置border-top和border-bottom，因为浏览器可以放大缩小所以好像没办法确定每行的开头和结尾是哪个字，似乎也没有可用的伪元素，这个可以用纯css实现吗？还是需要用javascript做？

想要仿照信的样子，每一列都有一个相同长度的红框，可以用纯css做吗？还是必须要用javascript做？可以简单描述下做法吗？

大概像下面这样子，重点是顶框和底框，如果所有的文字都放在一个div里面，可以做到调整大小后自动适应吗？

p.s. 我试了一下用css的方法，实际效果不佳。竖写格式文本参差不齐，文本互相交叠，而且白背景很小，不能调整，所以看起来并不好看，成功与否依赖于浏览器。大概用js才是最好的实现方式。

Answer 1

拆成3部分
①红线区域
②文本
③白色背景

①作为底部背景，
②和③用flex包裹悬浮在①上面
③是用来遮住红线的，宽度占满flex剩余空间

Answer 2

• writing-mode - CSS（层叠样式表） | MDN