我有一個項目列表和一些項目的結尾,我想添加一個圖標(或幾個 - 它是動態的)。項目的容器具有固定寬度,如果項目的文本大小太大 - 我想添加省略號。
所以問題是圖標被添加到文本旁邊,如果文本很長 - 圖標移出容器。所有項目的模板必須相同。
注意:並非所有項目都有圖標,某些圖標可能有多個圖標。
注2: javascript解決方案不適用,想在純CSS中製作。帶省略號的動態文本旁邊的滑動圖標
實際:
預計:
任何幫助深表感謝。
body {
font-size: 20px;
}
.container {
width: 150px;
background: #ff0;
list-style: none;
padding: 0px;
margin: 0px;
}
.container li {
border-bottom: 1px solid #000;
}
.item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.icon {
background: #0f0;
}
<ul class="container">
<li>
<div class="item">
<span class="text">Text 1</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 2 Text 2</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 3 Text 3 Text 3</span>
<span class="icon">12</span>
</div>
</li>
<li>
<div class="item">
<span class="text">Text 4 Text 4 Text 4</span>
<span class="icon"></span>
</div>
</li>
</ul>
問題是圖標的數量是動態的。所以我不能爲它設置'max-width:50px;'。文本和'最大寬度:70%;'相同。根本沒有圖標,在這種情況下,文本應擴展到整個項目空間。 – Kiril 2015-03-02 13:31:22