問題與溢出：隱藏和文本溢出：省略號

我已經得到了follwoing 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）

這裏有什麼問題嗎？謝謝。

來源

2015-10-31 Bogdan M.

您必須將overflow:hidden;添加到元素並減少max-width:90%;。

Jsfiddle

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

來源

2015-10-31 13:53:58 Alex

謝謝！完美的作品。 –

@BogdanM。不用謝。 – Alex

把省略號到.todo項標題（文本的容器，而不是父母）。

這裏有一個工作示例： 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了一點，所以它採用了箱中的相對和絕對定位，所以沒有什麼能掉出對齊。

來源

2015-10-31 13:56:38

問題與溢出：隱藏和文本溢出：省略號

回答

相關問題