所以,假设我有这个标记;
<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 – 产生如下图所示的结果.
但是,当第一个跨度中的文本长于div的分配宽度时,会出现此问题.通常情况只是正常的文本包装;第二个跨度被撞到第二行的末尾.
但是,我希望这个元素只是一行.现在,当然要做到这一点,你做;
white-space: nowrap; overflow: hidden;
但接下来发生的是第二个跨度消失为遗忘,因为它被第一个跨度中文本的长度驱逐.
我想要实现的是下面第三个例子中的图片.当第一个跨度的内容太长而无法显示时,文本溢出：省略号;将用点点数切割字符串,第二个跨度将被推到最右边(div的填充允许).
基本上,第一个跨度的伪最大宽度将等于div的宽度,不包括其填充并扣除span.sticky的宽度,无论可能是什么(因为它的内容可能会有所不同,所以宽度未设定).
我不知道在接近这样的事情时,max-width是否真的是要走的路,但是我可以用它来最好地描述我想要的行为.
是否有非JS方法来实现这一目标？
解决方法
这绝对可以,而且应该在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是我正在谈论的内容.他们必须成为省略,并按下按钮,不会破坏线条
