Question

说我有一个div包含一个歌曲标题和歌曲的长度（两个span）。如果两个span都在容器的范围内，我希望标题显示为完整，但如果标题太长，我希望标题是椭圆化的，歌曲长度完好无损。此外，歌曲长度应始终位于标题的右侧 - 不会浮动到容器的最右侧。

+-------------------+
+ a song 4:30       |
+-------------------+
+ another s... 4:30 |
+-------------------+

我发现了许多与我正在寻找的相似的例子 - 但在每种情况下，某些事情似乎与我需要的不同。这是我需要的近似值 - 除了在这个JSFiddle中，长度在最右边 - 而我需要它在标题的右边：http://jsfiddle.net/gyaMf/

我不一定知道“歌曲长度”的宽度，但如果它更容易，我们可以假设它是一些预设的宽度。

Answer 1

您可以使用:after伪元素和attr内容的组合轻松实现此目的。

jsFiddle here

<强> HTML

<div class="song">
<span len="4:31" class="title">This is the song</span>
</div>

<div class="song">
<span len="4:31" class="title">This is the</span>
</div>

<div class="song">
<span len="4:31" class="title">This</span>
</div>

<div class="song">
<span len="4:31" class="title">This is the song titlee </span>
</div>

<强> CSS

.song {
    font-size: 14px;
    width:160px;
    position:relative;
    border:1px solid black;
}
.title {
    white-space: nowrap;
    width:100px;
    display:block;
    overflow: hidden;
    text-overflow:ellipsis;
}
.title:after {
    content:attr(len);
    padding-left:5px;
    display:inline-block;
    position:absolute;
}

Answer 2

感谢大家的建议，但没有一个解决方案能够按需运行。我能够得到一个理想的解决方案，但不是没有jQuery：

var len = $title.outerWidth() + $length.outerWidth() + 14;
var available = $container.width() - $title.offset().left;

$container.toggleClass('too-long', len >= available);

我使用jQuery来计算两个跨度的总长度;如果没有足够的空间来容纳两者，则将too-long CSS类添加到容器中。（“14”是一个有点随意的数字，考虑到文本的大小以及当容器确定内容溢出时如何进行椭圆化，它似乎运行良好。）

如果没有too-long，则两个跨距都会呈现内联。使用too-long：

.too-long {
    padding-right: 3.5em;
}

.too-long .length {
    position: absolute;
    right: 2em;
}

因为容器有position: relative，这会产生所需的效果 - 带标题的长度流，但当不再有任何可用空间时，“粘”到容器的右边缘。这样做的缺点是，每次标题或长度发生变化时，too-long都必须重新评估，但是当发生这种情况时我已经做了各种其他CSS调整，所以这并没有增加多少工作。

Answer 3

现在您可以使用flexbox： http://jsbin.com/rojam/3

container {
  display: flex;
  flex-direction: row
  flex-wrap: nowarp;
  justify-content: space-between;
  align-items: baseline;
  align-content: center;
}

span.name {
  white-space: nowrap;                  
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 0;
  flex-shrink: 1;
}

span.len {
  flex-grow: 1;
  flex-shrink: 0;
}

两个并排，一个椭圆形

3 个答案: