文本溢出:省略号不起作用

Question

我不能text-overflow: ellipsis上班,我希望有人能发现我找不到的错误.这是我的代码:

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

JSFiddle:http://jsfiddle.net/59m5e6ex/

我找到了这个,但据我所知,我div满足了每一项要求.

Answer 1

您需要white-space: nowrap使用省略号类型的文本溢出添加到元素.否则,每次都会将文本换行到新行,并且不会检测到文本溢出.

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

因此,您至少需要运行3个属性text-overflow: ellipsis;:

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

它将返回具有指定最大长度的新字符串.但当然,它会改变它的价值.可以在此处找到有关此主题的更多内容