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

时间:2014-01-13 23:32:11

标签: html css

我有以下布局:

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

第一个标题包含动态内容,第二个标题具有固定的宽度设置。

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

我一直遇到的问题是,一旦我创建第一个div inline或float,它的宽度不再保持父级包含,使文本溢出到处,或者溢出设置为隐藏,我无法得到第二个标题与它位于同一行。

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

2 个答案:

答案 0 :(得分:2)

如果我理解正确的问题,可以使用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

答案 1 :(得分:0)

如果我正确理解了这个问题,以下JSFiddle可能会有解决方案: http://jsfiddle.net/modenadude/QntUm/2/

代码:

  • 保持两个<h2>内嵌
  • 如果第一个<h2>的宽度比第二个<h2> + <article>的宽度宽,则会将椭圆添加到第一个<h2> < / LI>

为了以防万一,我在max-width上设置了<h2>(至50%),并添加outline以清楚地显示宽度。

我使用jQuery来计算<h2> onload的宽度,但使用getElementByID可以用纯JS完成相同的操作(如果你这样做,我也可以设置它) d喜欢)。当然,它仅用于两个<h2>和一个<article>,因此简单的编辑可以使其更具扩展性。