console
let dom = document.getElementById('test')
let text = "关于再次征求《进一步稳定和扩大就业十六条政策措施(征求意见稿)》修改意见的函关于印发《关于开展达州市长江流安置保障的工作方案》的通知关于山洪灾害防治、防洪工程水毁修复和水库除险加固、雨水情监测设施"
function initText (dom, text) {
let fontSize = getOneChatPX().width
let width = dom.offsetWidth
let cols = Math.floor(width / fontSize)
let rows = Math.ceil(text.length / cols)
for(let i = 0; i < rows ; i++) {
let div =document.createElement('div')
if(i + 1 == rows) {
div.style.color = '#aaa'
div.style.fontSize = '12px'
}
div.innerHTML = text.slice(i * cols, i * cols + cols)
dom.appendChild(div)
}
function getOneChatPX(){
let p =document.createElement('p')
p.style.width = '1em'
p.style.opacity = 0
p.innerHTML = '赵'
document.body.appendChild(p)
let data = {
width:p.offsetWidth,
lineHeight:p.offsetHeight
};
document.body.removeChild(p)
return data;
}
}
initText(dom, text)
<div id='test' class="container">
</div>
.container {
width: 220px;
text-align: center;
}