SOURCE

const fontSize = 12
const boxWidth = 200
const limitLength = Math.floor(boxWidth / fontSize)

// 第1个就超出，即全都超出
const texts1 = [
    '12345644444555555',
    '123456',
    '12345644444',
    '1234564444455555',
    '123456444455',
    '12345645555'
]

// 大于1个的超出
const texts2 = [
    '123456',
    '12345644444',
    '12345644444555555',
    '1234564444455555',
    '123456444455',
    '1234564444455555',
    '1234564445555',
    '12345645555'
];

// 全都未超出
const texts3 = [
    '123456',
    '12345644444',
    '1234564445555',
    '12345645555'
];

// 1. 找到首个大于limit的索引，后面的都舍弃
function getShowTexts(list) {
    const firstExceedIndex = list.findIndex(({ length }) => length > limitLength)
    if (firstExceedIndex === -1) return list
    return list.slice(0, firstExceedIndex + 1)
}

// 2. 循环拼接
function render(list) {
    let str = ''
    list.forEach((item, index) => {
        str += `<p class=${index === (list.length - 1) && item.length > limitLength ? "multi-lines-text lines-1" : ''}>${item} ---【${index}】</p>`
    })
    return str
}

console.log('第一组==>', render(getShowTexts(texts1)))
console.log('第二组==>', render(getShowTexts(texts2)))
console.log('第三组==>', render(getShowTexts(texts3)))