css样式设置长标题竖排

css样式设置长标题竖排

1、文字适应高度，计算竖排一列几个字符，排几列

文字适应高度，计算大概竖排几个字符

首先文字大小，容器高度皆自适应，百分比，
不管视窗怎么变，如图，一列总为12个字符。
const num = Math.ceil(title.length / 12)
可以判断长标题需要排num列

2、循环截取，添加换行符

需要一个空数组存储截取好的标题
const arr = []
循环截取num列
for (let i = 0; i < num; i++) {
每一列截取12个字符
const str = e.title.slice(i * 12, (i + 1) * 12)
截取好的字符转换成数组，并加入换行符，再次组成字符串
const titleStr = str.split(’’).join(’
’)
数组添加num个字符串
arr.push(titleStr)
}
以上得到的数组，就是一列12个字符，有num列

3、设置样式竖列依次排开

给容器设置display: flex;得到下图