项目要求是一行放6个字,结尾的冒号要跟最后一个字连在一起,不同手机型号很容易控制不好宽度,就用js来实现,通过6的倍数来切割字符串,加上换行符\n,最后一行加上:。不同情况如图:
大家可以根据实际情况修改
<div class="title">{{ lineFeed(item.title) }}</div>
lineFeed(str) {
let newStr = ''
const proportion = 6
let num = 0
for (let i = 0; i < str.length; i++) {
if (i % proportion === 0 && i !== 0) {
newStr += str.slice(num, i) + '\n'
num = i
}
if ((i + 1) === str.length) { // 最后一行
newStr += str.slice(num, (i + 1)) + ':'
}
}
return newStr
}
注意需要给div加样式 white-space: pre-wrap;