如何应用右侧带有徽章文本'text-overflow:ellipsis'主题？

Question

我试图制作一条固定宽度的线，其中包含书名和徽章文本，当标题和徽章文本的长度过长时，缩短标题并添加省略号。

当徽章在标题左侧时，可以很容易地使用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 ... |

与CCD_ 3+CCD_。但是我不知道怎样才能达到同样的效果当徽章文本位于右侧时。例如

| 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] |

如何在右侧显示徽章文本的情况下实现正确的省略号显示？(徽章必须显示所有文本(

Answer 1

尝试将display: flex与margin-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/

Answer 2

使用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>