我嘗試制作一個包含書名和徽章文本的固定寬度行，當標題和徽章文本的長度太長時，它會縮短標題并添加省略號。
當徽章在標題的左側時，可以使用
overflow:hidden 輕松完成text-overflow:ellipsis。例如，
| [Sold Out] The Stackoverflow Book |
| [Sold Out] the quick brown fox jumps over the laz... |
| [Pre-Order Now] the quick brown fox jumps over th... |
| [Only 3 left in stock] the quick brown fox jumps ... |
它與overflow:hidden 配合得很好text-overflow:ellipsis。但是當徽章文本在右側時，我無法弄清楚如何獲得相同的結果。例如，
| The Stackoverflow Book [Sold Out] |
| the quick brown fox jumps over the laz... [Sold Out] |
| the quick brown fox jumps over th... [Pre-Order Now] |
| the quick brown fox jumps ... [Only 3 left in stock] |
如何在右側使用徽章文本實作正確的省略號顯示？（徽章必須顯示他們擁有的所有文字）
uj5u.com熱心網友回復：
嘗試使用display: flexwithmargin-left: auto作為徽章。
HTML：
<div class=line>
<div class=subject>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<div class=badge>
[Sold Out]</div>
</div>
<div class=line>
<div class=subject>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<div class=badge>
[Pre-Order Now]
</div>
</div>
<div class=line>
<div class=subject>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<div class=badge>
[Only 3 left in stock]
</div>
</div>
CSS：
.line {
display: flex;
}
.subject {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.push {
margin-left: auto;
}
.badge {
white-space: nowrap;
}
JSFiddle： https ://jsfiddle.net/ftbLph2m/3/
uj5u.com熱心網友回復：
使用flex它應該相當容易。
.book {
display: flex;
flex-wrap: nowrap;
width: 100%;
max-width: 300px;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status {
white-space: nowrap;
}<p class="book">
<span class="title">the quick brown fox jumps over the lazy dog</span>
<span class="status">[Sold Out]</span>
</p>
<p class="book">
<span class="title">the quick brown fox jumps over the lazy dog</span>
<span class="status">[Pre-Order Now]</span>
</p>
<p class="book">
<span class="title">the quick brown fox jumps over the lazy dog</span>
<span class="status">[Only 3 left in stock]</span>
</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442040.html
上一篇：有背景顏色時漸變不起作用