HTML 未指定特定宽度的省略号
HTML ellipsis without specifying the particular width
我正在尝试实现以下布局(请参阅下面的屏幕截图)。
- 如果 SPAN 和 B 都适合这个框 - 它们就一个接一个地走。
- 如果他们不这样做 - SPAN 有一个省略号,但 B 会完整显示(它永远不会大于整个块)。
B 可以包含在 SPAN 中 - 但它对我没有帮助。我也尝试使用表格,甚至是嵌套表格 - 没有任何帮助..
预期行为:
初始片段:
div {
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>
您需要将显示设置为 inline-block 并在内部跨度上定义最大宽度以覆盖它。
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;
}
<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>
只需将 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 默认设置的组合,包括 flex-shrink: 1
,使省略号在 flex formatting context 中呈现。
回答我自己的问题:
实际上,我希望解决方案能够在 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>
我正在尝试实现以下布局(请参阅下面的屏幕截图)。
- 如果 SPAN 和 B 都适合这个框 - 它们就一个接一个地走。
- 如果他们不这样做 - SPAN 有一个省略号,但 B 会完整显示(它永远不会大于整个块)。
B 可以包含在 SPAN 中 - 但它对我没有帮助。我也尝试使用表格,甚至是嵌套表格 - 没有任何帮助..
预期行为:
初始片段:
div {
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>
您需要将显示设置为 inline-block 并在内部跨度上定义最大宽度以覆盖它。
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;
}
<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>
只需将 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 默认设置的组合,包括 flex-shrink: 1
,使省略号在 flex formatting context 中呈现。
回答我自己的问题:
实际上,我希望解决方案能够在 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>