0

所以我想要这样的东西：

Hello [element]

还有这种情况：

Hello blahblahblah... [element]

向右浮动元素会这样做，这是我不想要的：

Hello                 [element]
Hello blahblahblah... [element]

编辑：

我试过的html是这样的：

<h3 id="container">
  <span>[element]</span>
  <a>dynamic text</a>
</h3>

CSS：

span{
  float: right;
}

#container {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

另一个问题是 [element] 可能是可变长度的。我想截断 a 标签，使其适合所有 [element] 并将其全部放在一行上。我知道这可能会让这个问题变得更加困难......

编辑2：

意识到我希望容器 h3 具有固定的最大宽度并不清楚。所以基本上如果a标签和span的组合宽度大于最大宽度，span会将截断位置放在左边。像这样：

字符串是：Hello World

所以在这种情况下它可能看起来像这样：

你好世界...[小el]

地狱...[更大的跨度el]

想法？

4

1 回答 1

3

更新的想法

这是我在下面的原始想法的改进版本，但尝试使用额外的 wrap 创建您在聊天中提到的固定宽度的容器和一般外观div。我认为这可以完全由 css 工作的唯一方法是让您事先知道您的“徽章”区域的最大宽度可能是多少，然后将您max-width的文本区域设置为容器的宽度减去该潜力徽章区域的最大宽度。这是下面的修改代码和小提琴示例，我假设一个200px容器，最多100px徽章区域宽度。您最终会“过早地”截断一些文本（如，它似乎可以变得更宽，但我们将其限制在一定的空间内；参见小提琴中的第三行）。

HTML

<h3 class="container">
  <div>   
  <span>[elem]</span>
  <a>dynamic text</a>
  </div>
</h3>

CSS

.container {
  width: 200px; /* this defines your right edge */
  background-color: cyan;
  overflow: hidden;
}

.container > div {
  float: left;
  clear: left;
  position: relative;
  padding-right: .1em;
  white-space: nowrap;
}

.container span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
}

.container a {
  display: block; 
    /* the following assumes the span "badge" area is 100px max, 
       so it is 200px - 100px = 100px in width */ 
  max-width: 100px;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

创见

也许这会奏效。

.container {
  float: left; /* this collapses the container around the 'a' tag */
  position: relative; /* this is going to position the 'span' */
  padding-right: .1em; /* gap to element 'span' */
  white-space: nowrap; 
}

.container span {
  position: absolute;
  left: 100%; /* push behind 'a' tag */
  white-space: nowrap; /* keep this from wrapping */
}

.container a {
  display: block;
  max-width: 100px; /* set your max width for the 'a' tag only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

看一个小提琴的例子。

于 2012-11-15T02:38:53.810 回答