Question

我想在一行中有三个字段：

<div><span class="name">Blue Widgets Over Miami</span><span class="size"> large </span><span class="price">$9.99</span></div>

我希望.name和.size位于该行的左侧，右侧是.price，并且每个字段之间始终至少有一个空格。

虽然这是棘手的部分。如果屏幕真的很窄，我不希望div包裹或溢出。相反，我想.name文本溢出作为省略号。

div{background:#abcdef;white-space:nowrap} 
.name{text-overflow:ellipsis} 
.size{} 
.price{float:right}

现在如果屏幕很窄，那么.price会下降到第二行（我不想要），如果屏幕更窄，那么.name和.size会溢出div（我也不会想要）和.name永远不会截断一些省略号。

我做错了什么？

Answer 1

我认为这就是你要https://jsfiddle.net/kvb5hb6f/14/

的目标

我移除了浮动并将其更改为右侧的绝对位置，然后将padding-right添加到父div，以便左侧的文本不会超过右侧的价格，然后添加{ {1}}到父div。

text-overflow: ellipsis;

Answer 2

使用flexbox：

div {
  background: #abcdef;
  display: flex;
}
.name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.size {
  margin: 0 .5em;
}
.price {
  margin-left: auto;
}

<div>
  <span class="name">Blue Widgets Over Miami</span>
  <span class="size">large</span>
  <span class="price">$9.99</span>
</div>
<br />
<div>
  <span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span>
  <span class="size">large</span>
  <span class="price">$9.99</span>
</div>

防止浮动包装并在需要时强制文本溢出

2 个答案: