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

我不能让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/

我发现this，但据我所知，我的div都会召开需求。

来源

2017-05-04 vsakos

只需添加空格：NOWRAP：您.in2类 – StefanBob

加上'白色空间：NOWRAP;'应该帮助 – Rennie

您需要将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; 
}

它会返回指定最大长度的新字符串。但它当然会改变它的价值。更多本主题中可以发现here

来源

2017-05-04 20:41:48