到2022年，有一个新的方法来完成这个任务，这是CSS规则线夹，它基本上告诉我们应该保留多少行，其余的都将被修剪。下面是一个例子，在这里您可以拖动角落，并试验div的尺寸。

#resizable { width: 400px; height: 150px; padding: 0 20px; } .wrapper { border: 1px solid #dddddd; background: #ffffff; color: #333333; position: relative; } .slider-text-wrapper p, .slider-text-wrapper .h1 { width: 100%; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 4; -moz-line-clamp: 4; -ms-line-clamp: 4; line-clamp: 4; overflow: hidden; } .slider-text-wrapper .h1 { -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; line-clamp: 2; font-size: 20px; margin: 10px 0; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).resizable(); } ); </script> <div id="resizable" class="ui-widget-content wrapper"> <div class="slider-text-wrapper"> <p class="h1">Example headline with surplus of words without any meaning, for just mere demonstration of html and css</p> <p class="slider-text-intro">Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel.</p> </p> </div>

好的，Firefox 7实现了text-overflow:省略号和text-overflow: "string"。最终版本计划于2011-09-27发布。

这个问题的另一个解决方案可能是下面的一组CSS规则:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

上面CSS的唯一缺点是，无论文本是否溢出容器，它都会添加“…”。不过，如果您有一堆元素，并且确定内容会溢出，那么这将是一组更简单的规则。

我的意见。向Justin Maxwell的原始技术致敬

到2022年，有一个新的方法来完成这个任务，这是CSS规则线夹，它基本上告诉我们应该保留多少行，其余的都将被修剪。下面是一个例子，在这里您可以拖动角落，并试验div的尺寸。

#resizable { width: 400px; height: 150px; padding: 0 20px; } .wrapper { border: 1px solid #dddddd; background: #ffffff; color: #333333; position: relative; } .slider-text-wrapper p, .slider-text-wrapper .h1 { width: 100%; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; box-orient: vertical; -webkit-line-clamp: 4; -moz-line-clamp: 4; -ms-line-clamp: 4; line-clamp: 4; overflow: hidden; } .slider-text-wrapper .h1 { -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; line-clamp: 2; font-size: 20px; margin: 10px 0; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script> $( function() { $( "#resizable" ).resizable(); } ); </script> <div id="resizable" class="ui-widget-content wrapper"> <div class="slider-text-wrapper"> <p class="h1">Example headline with surplus of words without any meaning, for just mere demonstration of html and css</p> <p class="slider-text-intro">Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel.</p> </p> </div>

如果您可以使用JavaScript解决方案，有一个jQuery插件可以跨浏览器实现这个功能——请参阅http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

更新:Firefox 7(2011年9月27日发布)现在支持text-overflow:省略号。耶!我最初的回答是有历史记载的。

Justin Maxwell有跨浏览器的CSS解决方案。但是它也有缺点，就是不能在Firefox中选择文本。查看他在马特·斯奈德博客上的客座文章，了解这是如何工作的全部细节。

注意，这种技术还阻止使用Firefox中的innerHTML属性更新JavaScript中的节点内容。看到这篇文章的结尾的解决办法。

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

xml文件内容

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

更新节点内容

要在Firefox中以一种工作方式更新节点的内容，请使用以下方法:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

请参阅Matt Snider的帖子，了解这是如何工作的。