在多行跨度中添加三个点

Question

我在这里找到了这个问题,解决方案非常简单:

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

你能否告诉我如何...在我的例子中放置字符串的结尾？

Answer 1

该text-overflow属性的规范说多行文本不可能:

当内联内容以其"溢出"而非"可见"的内联进程方向溢出其块容器元素("块")时,此属性指定呈现.文本可能会溢出,例如当它被阻止包装时(例如由于'white-space:nowrap'或单个单词太长而无法适应).

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

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

编辑 这个小提琴有一个解决方法使用jquery:http://jsfiddle.net/k5VET/(来源:跨浏览器多行文本溢出,省略号附加在宽度和高度固定div？)