多行文本溢出显示省略号(…)

时间：2025-05-14 07:29:29

在开发过程中会出现大量文字展示情况，一般都会做超过几行，剩余部分按照省略号展示。

单行展示

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行展示

  • WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）方可使用，有很大的兼容问题
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

最稳妥的办法（最适用于多行省略 ）

通过JS计算字符串在浏览器中显示的宽度。

将文本数据，通过先生成dom，然后获取dom的宽度，即可拿到整个文本的宽度。

然后通过获取屏幕宽度，计算所需要的行数，算出总行数的宽度。

两者对比，判断是否需要展示省略号(…)。

function calculateData(text, line){
    let cWidth = ;
    let tWidth = parseFloat((cWidth * line).toFixed(2));
    let span = ('span');
     = text;
     = 'hidden';
    ('class','fontSize');
    (span);
    const $dom = ('fontSize')[0];
    let swidth = $;
    ('body')[0].removeChild($dom);
    return tWidth < swidth;
}
const str = '多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示多行展示';
(calculateData(str, 2)); // 是否展示省略号(...)

相关文章