关于文字内容内容溢出用（...）表示

最新推荐文章于 2022-02-10 09:11:34 发布

转载最新推荐文章于 2022-02-10 09:11:34 发布 · 538 阅读

本文介绍如何使用CSS和jQuery来优雅地处理文本溢出问题。通过设置CSS属性white-space, text-overflow 和 overflow，可以实现文本一行显示并用省略号表示超出部分。此外，还提供了一个jQuery示例，用于按字符数限制文本，并添加省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

张鑫旭老师原文关于文字内容溢出用点点点(…)省略号表示

一、css方法

p{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

二、jQuery 限制字数的方法

$(document).ready(function(){
    // 限制文本字数
    $("p").each(function(){\
        var maxwidth = 23 ;      // 文本总数
        if($((this).text().length > maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html() + "...");
        }
    })
})