10

所以假设我有这个标记；

<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 方法来实现这一点？

例子

4

2 回答 2

11

这绝对可以，并且应该在 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 就是我所说的。他们必须变成省略号，并有一个按钮跟随他们，而不是断线

于 2013-01-08T22:24:52.147 回答
2 
<html>
  <head>
    <style>
      .left {
        max-width: 200px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="right">FOO</div>
      Lorem
    </div>
    <br />
    <div class="left">
      <div class="right">FOO</div>
      Lorem ipsum
    </div>
    <br />
    <div class="left">
      <div class="right">FOO</div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit
    </div>
  </body>
</html>
于 2014-03-04T00:38:24.837 回答