文本溢出：省略号无效[重复]

Question

我无法让文本溢出：省略号工作，我希望有人能发现我找不到的错误。这是我的代码：

HTML：

<div class="out">
    <div class="in1"></div>
    <div class="in2">some long random text which should not fit in here</div>
</div>

CSS：

* {
    box-sizing: border-box;
}

.out {
    display: block;
    height: 60px;
    width: 250px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    color: #000;
    background: lightgreen;
}

.in1 {
    height: 60px;
    width: 60px;
    padding: 10px;
    float: left;
    border: 1px solid red;
}

.in2 {
    float: left;
    height: 60px;
    line-height: 60px;
    width: 190px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.1em;
    border: 1px solid blue;
}

JSFIDLE（JSIDLE）：http://jsfiddle.net/59m5e6ex/

我找到了这个，但据我所知，我的div满足了所有要求。

Answer 1

只需在. in2中添加空格：nowap；参见w3学校的这个例子：https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 2

你需要

white-space: nowrap;

在您的in2类中，否则文本将换行。

看见https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/有关更多详细信息：）

Answer 3

您需要在带有省略号类型的文本溢出的元素中添加white-space： nowap。否则，文本每次都被包装到新行，并且没有检测到文本溢出。

这是你的工作小提琴：http://jsfiddle.net/59m5e6ex/2/

因此，至少需要3个属性才能运行文本溢出：省略号 ：

element {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

此外，如果您不能使用任何所需的属性，那么可以使用javascript在文本末尾添加“3点”。

/**
 * @param  text          string       - text to shorten
 * @param  maxTextLength int          - desired max length of shorten string
 * @return ret           string       - new shortened string
 */
function shorten(text, maxTextLength) {
    var ret = text;
    if (ret.length > maxTextLength) {
        ret = ret.substr(0,maxTextLength-3) + "...";
    }
    return ret;
}

它将返回一个具有指定最大长度的新字符串。但当然，它会更改其值。本主题的更多信息可以在此处找到