文本溢出：省略号不起作用[重复]

Posted 2023-05-07

【中文标题】文本溢出：省略号不起作用[重复]

【英文标题】：text-overflow: ellipsis is not working [duplicate]

【发布时间】：2017-10-03 04:39:06

【问题描述】：

我无法让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 满足所有要求。

【问题讨论】：

只需将 white-space: nowrap: 添加到您的 .in2 类中

添加 white-space: nowrap; 应该有帮助

【参考方案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;

它将返回一个具有指定最大长度的新字符串。但当然，它会改变它的价值。更多关于这个话题可以找到here

【参考方案2】：

你需要

white-space: nowrap;

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

请参阅https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ 了解更多详情。 :)

【讨论】：

天哪，谢谢你，我是个白痴：D

【参考方案3】：

只需添加空格：nowrap；在.in2; 请参阅 w3schools 的此示例：https://www.w3schools.com/cs-s-ref/css3_pr_text-overflow.asp