溢出问题：隐藏和文本溢出：省略号

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

将省略号放在.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，所以它在盒子中使用相对和绝对定位，所以没有任何东西可以失去对齐。

Answer 2

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

Jsfiddle

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