动态文本的最大宽度

Question

所以,假设我有这个标记;

<div>
  <span>Text one</span>
  <span class="sticky">ABC</span>
</div>
<div>
  <span>Some other text</span>
  <span class="sticky">DEF</span>
</div>
<div>
  <span>Lorem dolor sit amet lorem ipsum dolor</span>
  <span class="sticky">GHI</span>
</div>

哪个 - 随附CSS - 产生如下图所示的结果.

但是,当第一个文本span长于分配的宽度时,会出现问题div.通常情况下,正常的文本包装; 第二行span被撞到第二行的末尾.

但是,我希望这个元素只是一行.现在,当然要做到这一点,你做;

white-space: nowrap;
overflow: hidden;

但接下来发生的事情是第二个span消失为遗忘,因为它被第一个文本的长度所驱逐span.

我想要实现的是下面第三个例子中的图片.当第一个内容span是太长显示,text-overflow: ellipsis;将削减以点-点-点的字符串,而第二个span会推到最右侧边缘(padding在的div允许).

从本质上讲,第一个的伪max-width值span将等于它的宽度div,不包括它padding的宽度span.sticky,并且可以减去任何宽度(因为它的内容可能会变化,所以宽度没有设置).

我不知道max-width在接近这样的事情时是否真的是要走的路,但是我可以用来最好地描述我想要的行为.

是否有非JS方法来实现这一目标？

Answer 1

这绝对可以,而且应该在CSS中完成.在第一个跨度上应用固定宽度和固定高度.高度使其不会拉伸到多条线.然后可以定位.sticky跨度.甚至可以使用百分比或ems使其变得流动.需要考虑的事情,我不知道'ABC','DEF'的上下文,但如果它们纯粹是视觉而不是结构元素,它们最好使用:before或:after伪类.

这是一个简单的例子:

div { 
    width: 200px; /* some amount that you set */
}
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */
    display: inline-block; /* so height and width actually take affect */
    max-width: 80%;
    height: 1em; /* so overflow hidden works and keeps text on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}
span.sticky {
    display: inline-block;
    width: 20%;
}

如果你想看到这个在现场工作,我在moolta.com上做了这个设计.点击"制作挑战"并打开模式以选择朋友.下面列表中的li是我正在谈论的内容.他们必须成为省略,并按下按钮,没有断线