省略长文本截断答案

【问题标题】：Ellipsis to truncate a long text省略长文本截断
【发布时间】：2017-10-23 15:23:48
【问题描述】：

我正在使用省略号概念来截断 HTML 中的长文本。我已经成功地截断了句子，但“...”不会出现在我的 HTML 中。我将以下内容用于css

输出似乎很好..即测试测试测试测试测试测试测试输出是测试测试测试当我真正想要它作为测试测试时......

<div style="text-align:left; line-height: 20px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; width: 99%;
            display : block;">

【问题讨论】：

所以你说的基本上是页面看起来很好并且显示了省略号，但是看看页面源，html显示了没有html的整个文本？是这样吗？
oops..missed the code..sorry
顺便说一句，他的css由于html标签而消失了。这就是消失的：<div id="testing" style=" text-align:left; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 99%; display : block;" >
谢谢..一直试图将代码包含在问题中.. :D
我是说页面和输出都很好，但是在截断文本之后没有 ...。

标签： javascript html css

【解决方案1】：

我不确定你在问什么，或者你看到了什么，但只有在容器中没有足够的空间时才会截断文本。例如：

<style type="text/css">
div {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100px;
}
</style>
<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

http://jsfiddle.net/jS7ea/

这里我将 div 的宽度限制为 100px，它只显示如下：

Lorem ipsu...

在您的示例中，您的宽度为 99%，因此只有在小于实际内容宽度时才会看到截断（尝试调整浏览器窗口的大小以进行检查）。

【讨论】：

不，我确实尝试截断高达 50% 甚至更少。我的问题是我无法按照省略号的承诺将“...”附加到截断的文本中。所以不是结果 Lorem ipsu ...我得到的只是 Lorem ipsu
你能看到我链接到的 jsfiddle 中的省略号吗？我可以在 Chrome 上看到它。
请注意，对于缺少空格的内容，您可能必须改用“white-space: pre”，并为您的元素设置最大高度。我已经使用这个 CSS 成功地将一些长 URL（在 RSS 提要中）截断为更合理的长度：{white-space: pre;文本溢出：省略号；溢出：隐藏；最大宽度：24em；最大高度：1.4em;}
有没有办法避免width: 100px;宽度应该从它的容器中计算出来。
@JunleLi 是的，你可以完全省略 width 属性，在这种情况下，宽度将从容器中计算出来

【解决方案2】：

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

您也可以使用 &hellip; …（水平省略号）代替 3 个点

来源：http://html5hub.com/ellipse-my-text

【讨论】：