css样式设置长标题竖排

css样式设置长标题竖排(超出另起一列竖排)

  • css样式设置长标题竖排
    • 1、文字适应高度,计算竖排一列几个字符,排几列
    • 2、循环截取,添加换行符
    • 3、设置样式竖列依次排开

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;得到下图
css样式设置长标题竖排_第1张图片

你可能感兴趣的:(css样式,css,css3,前端)