HTML省略号，未指定特定宽度

Question

我试图实现以下布局（请参见下面的屏幕截图）。

• 如果SPAN和B都装在盒子里 - 它们只是一个接一个地去。
• 如果他们不这样做 - SPAN有省略号但B完全显示（它永远不会比整个块大）。

B可以包含在SPAN中 - 但它对我没有帮助。我也试图使用表格，甚至是嵌套表格 - 没有任何帮助......

预期行为：

初始摘录

＆＃13;

＆＃13;

div {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

＆＃13;

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将显示设置为内联块并在内部范围上定义最大宽度以覆盖它。

＆＃13;

＆＃13;

div {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display:inline-block;
  max-width:150px
}

b {
  padding-left: 10px;
}

＆＃13;

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>1234</b>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将display: flex添加到div容器中：

div {
  display: flex; /* new */
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

弹性默认设置（包括flex-shrink: 1）的组合可以使省略号在flex formatting context中呈现。

Answer 3

回答我自己的问题：

实际上，我希望该解决方案能够在wkhtmltopdf库生成的PDF中工作。这个库基于QT WebKit，它不支持flex，但它确实支持flex的旧语法（称为flex-box）。

以下是它在wkhtmltopdf中的工作原理（虽然也适用于Chrome）：

.flexrow {
  width: 300px;
  margin-top: 30px;
  border: 1px solid green;

  display: -webkit-box;
}

.flexrow .fst {
  background-color: yellow;

  -webkit-box-flex: 0.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px; /* for ellipsis */
}

.flexrow .snd {
  background-color: aqua;

  white-space: nowrap;
}

.flexrow .trd {
  background-color: pink;

  -webkit-box-flex: 2147483647; /* max int */
}

<div class="flexrow">
  <div class='fst'>test</div>
  <div class='snd'>12345</div>
  <div class='trd'></div>
</div>

<div class="flexrow">
  <div class='fst'>test test test test test test test test test test test test test test</div>
  <div class='snd'>50</div>
  <div class='trd'></div>
</div>