0

假设我有一个div包含歌曲标题和歌曲长度（两者span）的单曲。如果两个spans 都在容器的范围内，我希望标题完整显示，但如果标题太长，我希望标题被省略，歌曲长度保持不变。此外，歌曲长度应始终位于标题的右侧——而不是浮动到容器的最右角。

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

我发现了很多与我正在寻找的示例类似的示例-但在每种情况下，似乎都与我需要的有所不同。这是我需要的近似值 - 除了在这个 JSFiddle 中，长度在最右边的角落 - 而我需要它在标题的右侧：http: //jsfiddle.net/gyaMf/

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

4

3 回答 3

1

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

jsFiddle在这里

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;
}
于 2013-10-09T15:56:33.470 回答
0

感谢大家的建议，但没有一个解决方案能按需要工作。我能够得到一个理想的解决方案，但不是没有 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 调整，所以没有那么多额外的工作。

于 2013-10-15T04:50:00.817 回答
0

现在您可以使用 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;
}
于 2014-12-17T21:29:25.587 回答