在多行跨度中添加三个点

Question

我 在 SO 上发现了这个问题，解决方案非常简单：

jsfiddle：http: //jsfiddle.net/Y5vpb/

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>​

CSS:

 span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

它按预期工作，打印： Lorem Ipsum is simply du...

现在，我想做同样的事情，但总是失败，在下面的例子中创建：

jsfiddle：http: //jsfiddle.net/9HRQq/

HTML:

 <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>

CSS:

 .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;
}

你能告诉我如何实现将 ... 放在我的示例中的字符串末尾吗？

原文由 Nikola 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

text-overflow 属性的规范说明这对于多行文本是不可能的：

此属性指定当 内联内容 在其内联进程方向上溢出其块容器元素（“块”）时呈现，该方向具有“溢出”而不是“可见”。文本可能会溢出，例如当 它被阻止换 行时（例如由于’white-space：nowrap’或单个单词太长而不适合）。

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

来源： http ://dev.w3.org/csswg/css3-ui/#text-overflow

编辑 这个小提琴有一个使用 jquery 的解决方法：http: //jsfiddle.net/k5VET/ （来源： Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div? ）

原文由 Marcelo De Zen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这在没有 js 或 jquery 的情况下是可能的。只是纯CSS。

类似于 vijay 的回答，但要添加，您需要为 -webkit-box-orient: vertical; 设置一个额外的字段

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* limit to 2 lines */
}

原文由 donda 发布，翻译遵循 CC BY-SA 4.0 许可协议