溢出问题：隐藏和 text-overflow：省略号

Question

我有以下 HTML 标记：

    <div class="todo-item">
        <div class="todo-complete-box"></div>
        <div class="todo-item-title">Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something,Do something, do something
        </div>
    </div>

以及以下 CSS：

div.todo-item{
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 7px;
    height: 45px;
    max-height: 45px;
    white-space: nowrap;
    overflow: hidden;
}
div.todo-complete-box{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 2px;
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 5.5px;
    margin-right: 10px;
}
div.todo-item-title{
    display: inline-block;
    max-width: 100%;
}

<div class="todo-item">只是一个容器。它的宽度是 100%。我给它添加了white-space: nowrap;和overflow: hidden属性，这样当<div class="todo-item-title">里面的标题太长的时候，它不会开箱即用

现在看起来像这样：

但是当我将 text-overflow: ellipsis; 属性添加到 <div class="todo-item"> 元素时：

div.todo-item{
    text-overflow: ellipsis;
}

，看起来像这样：

据我所知，3个点应该显示在文本的末尾，而不是将文本全部替换 (http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow&preval=ellipsis)

这里有什么问题？谢谢。

Answer 1

您必须向元素添加 overflow:hidden; 并减少 max-width:90%;。

Jsfiddle

div.todo-item-title {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

将省略号放在 .todo-item-title（文本的容器，而不是父项）上。

这是一个工作示例： https://jsfiddle.net/fvuuLegL/

div.todo-item-title{
 display: block; position:absolute; left: 0px; top:13px; padding-left:44px;
 max-width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis; 
}

还对您的 css 进行了一些更改，使其在框内使用相对和绝对定位，因此任何内容都不会错位。

溢出问题：隐藏和 text-overflow：省略号

Problems with overflow: hidden and text-overflow: ellipsis

html

css

overflow