Question

我找到了this question here on SO，解决方案非常简单：

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/（来源：Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?）

Answer 2

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

上面的CSS属性＆＃39; ll放三个点......
例如：

Lorem Ipsum简直就是假人印刷文本和排版行业。的Lorem ...

Answer 3

将width: 200px;和white-space: nowrap;添加到.text css块。如果没有设置宽度，文本只会展开并填充。

在多行跨度中添加三个点

3 个答案: