html - 带有省略号和 nowrap 空白的文本换行

Question

我想使用ellipsis.

但是，在我当前的实现中，它不包含会导致它超出的额外单词，div并且不会显示ellipsis表明文本已被截断。

我究竟做错了什么？

http://jsfiddle.net/sw6Sp/6/

<div class="testWrap">This is some very long text that I want to cut off </div>

.testWrap{
    max-width: 125px;
    height:15px;
    overflow: hidden;
    text-overflow:ellipsis;
    border: 1px solid black;
}

Answer 1

Just use text-overflow: ellipsis along with white-space: nowrap.

Updated Example

.testWrap {
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

添加 css-rulewhite-space: nowrap;应该可以解决您的问题。

<div class="testWrap" style="
    max-width: 125px;
    height:15px;
    overflow: hidden;
    text-overflow:ellipsis;
    border: 1px solid black;
    white-space: nowrap;
">This is some very long text that I want to cut off </div>

Answer 3

如果您想使用省略号而不white-space: nowrap使用 ，请使用这些 CSS 规则

white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;