限制字符数，超出显示省略号...

最新推荐文章于 2023-02-22 14:58:47 发布

转载最新推荐文章于 2023-02-22 14:58:47 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangruiqi/p/8284566.html

文章标签：

#javascript #ViewUI

本文介绍如何使用CSS和JavaScript实现文本的自动截断显示，包括单行文本的CSS解决方案，以及通过限制字符数来适应固定宽度容器的多行文本截断方法，并附带示例代码。

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

一、适合单行文本 css 实现

　　overflow: hidden;

　　text-overflow:ellipsis;

　　white-space: nowrap;

二、单行文本，多行文本都可以

　　通过限制字符数来实现

　　文本容器有宽度比较合适

function ellipsis(box,num) {
        $(box).each(function () {
            var maxwidth = num;
            if ($(this).text().length > maxwidth) {
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + '…');
            }
        });
    }
    //box 文本容器的选择器  可以设置合适的宽度查看效果
    //num 要显示的字符数 Number
    //比如：
    ellipsis(".box",30);