场景
- 在展示长文本内容时，通常会要求默认只展示两行或三行内容，文末用'...'表示
- 点击查看全文时，才展示全部内容
缩略显示
全文显示
方案策略
- 获取文本全文
- 获取DOM容器的宽度
- 获取DOM容器字体大小
- (容器宽度 * 展示行数) / 字体大小 = 可展示的字符数
- 注意：需要对数字等ascii码字符特殊处理
方案代码
/**
* el: 文本所在的DOM元素
* text: 文本内容
* line: 指定返回行数
* return { lineClamp: 是否进行了剪切, text: 返回的文本 }
*/
function lineClamp(el, text, line) {
if (!el || !text) return { lineClamp: false, text: '' }
const elCss = window.getComputedStyle(el)
const elWidth = parseFloat(elCss.getPropertyValue('width'))
- parseFloat(elCss.getPropertyValue('padding-left'))
- parseFloat(elCss.getPropertyValue('padding-right'))
const elFontSize = parseFloat(elCss.getPropertyValue('font-size'))
const wordsLimit = Math.floor((elWidth * line) / elFontSize)
let breakpoint = -1
let words = 0
for (let num = 0, len = text.split('').length; num < len; num += 1) {
words += text[num].charCodeAt() > 255 ? 1 : 0.5
breakpoint += text[num].charCodeAt() > 255 ? 1 : 0.9
if (Math.ceil(words) >= wordsLimit) {
break
}
}
if (text && text.length >= wordsLimit) {
return { lineClamp: true, text: `${text.substring(0, breakpoint - 2)}...` }
}
return { lineClamp: false, text }
}
