html – 如何使用省略号溢出来生成内联扩展头

2023年8月20日 194次阅读

我有以下布局：

<article>
    <h3><a>...</a></h3>
    <h3><a>...</a></h3>
</article>

第一个标题具有动态内容,第二个标题具有固定宽度设置.

我希望标题是内联的,当第一个的内容增长时,它会延伸,直到两个标题的宽度之和为100％,然后溢出文本为省略号.

我一直遇到的问题是,一旦我使第一个div内联或浮动,它的宽度不再保持父级包含,使文本溢出到处,或溢出设置为隐藏,我无法得到第二个标头与它位于同一条线上.

P.S.：不幸的是,这将需要支持尽可能多的旧浏览器,回到I.E. 6将是最好的(/ barf)但是尽可能多的解决方案将是最有价值的.谢谢！

最佳答案 如果我理解正确的问题,可以通过
flexible boxes轻松实现：

article {
  display: inline-flex;
  width: 100%;
}
article > h3:nth-child(1) {
  flex: 1;
}
article > h3:nth-child(2) {
  flex: 0 0 150px;
}
a {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

JSBin.

点赞