Javascript 省略号用于截断长文本

Javascript 省略号用于截断长文本,javascript,html,css,Javascript,Html,Css,我使用省略号概念来截断HTML中的长文本。我成功地截短了句子,但是“…”不会出现在我的HTML中。 我使用下面的css 输出似乎很好。。i、 e.,用于测试 输出是测试 当我真的想要它作为测试的时候 <div style="text-align:left; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 99%;

我使用省略号概念来截断HTML中的长文本。我成功地截短了句子,但是“…”不会出现在我的HTML中。 我使用下面的css

输出似乎很好。。i、 e.,用于测试 输出是测试 当我真的想要它作为测试的时候

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

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

<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>
在您的示例中,宽度为99%,因此只有在小于实际内容宽度时才会看到截断(请尝试调整浏览器窗口的大小以进行检查)

您也可以使用
&hellip(水平省略号)而不是3个点


来源:

那么你的意思基本上是页面看起来很好,并且显示省略号,但是看看页面源代码,html显示的是没有html的整个文本?是吗?哦..错过了代码..对不起
,顺便说一下,他的css由于html标签而消失了。这就是消失的东西:
谢谢..一直试图将代码包含到问题中我说的页面和输出是好的,但没有。。。在截短的文本之后。不,我尝试过截短高达50%甚至更少。我的问题是,我无法按照省略号所承诺的那样将“…”附加到截断的文本中。。所以结果不是Lorem ipsu。。。我得到的只有Lorem ipsuCan你在我链接的JSFIDLE中看到省略号了吗?我在Chrome上看得很清楚。请注意,对于缺少空格的内容,您可能必须使用“空白:pre”,并为元素设置最大高度。我使用这个CSS成功地将一些长URL(在RSS提要中)截断为更合理的长度:{空白:pre;文本溢出:省略号;溢出:隐藏;最大宽度:24em;最大高度:1.4em;}有没有办法避免
宽度:100px宽度应从其容器中计算。@JunleLi是的,您可以完全忽略宽度属性,在这种情况下,宽度将从容器中计算
Lorem ipsu...
function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}