Html 在多行跨距中添加三个点

我发现，解决方案非常简单：

jsfiddle：

html:

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>​

它像预期的那样工作，它打印：

Lorem Ipsum就是du…

现在，我想在下面的示例中创建同样的东西，但一直失败：

jsfiddle：

html:

---

你能告诉我如何在我的例子中把

..

放在字符串的末尾吗？

添加

宽度：200px和
空白：nowrap到你的.text css块。未设置宽度时，文本只会展开和填充。
文本溢出属性的规范指出，这对于多行文本是不可能的：

此属性指定当内联内容在其内联进程方向上溢出其块容器元素（“块”）时的渲染，该内联进程方向具有“溢出”而非“可见”。例如，当被阻止换行时，文本可能溢出（例如，由于“空白：nowrap”或单个单词太长而无法容纳）

换句话说，仅适用于单行文本块

资料来源：

编辑
这个fiddle有一个使用jquery的变通方法：（来源：）

上面的CSS属性将放置三个点。。。

例如：

Lorem Ipsum只是个傀儡

打印和打印的文本

排版业。洛雷姆…

空白：nowrap将导致内容不跨越多行。我认为OP的问题是在保留多行的同时，如果内容已经被剪辑，最后仍然会自动生成省略号。啊，我想我没有得到那部分，谢谢。我也是在再次搜索后发现这一点的。其他人尝试过这个，但最终使用了jQuery。@devundef:是的，实际上我可以，我不知道为什么我以前没有想到这个。塔克斯！现在，当我在谷歌上搜索时，我看到还有（OFC）插件可以用jQuery做这类事情，例如：你不应该需要
！重要信息
。（如果您确实需要它，那么样式表中的其他地方可能有问题）
span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

<div class="textContainer">                
    <img src="#" class="image" alt="the_image">
    <span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>

.textContainer{
    width: 430px;
    float: left;
    margin-top: 10px;
    border: 1px solid black;                
}

.text {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #047F04;
    display: block;
    white-space: normal;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 99px;
}

.image {
    float: right;
    position: absolute;
    top: 85px;
    right: 10px;
    width: 108px;
    height: 42px;
}

span{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* no of lines */
    text-overflow: ellipsis;
    overflow:hidden !important;
    width:180px;
}