html - 将元素直接放在可能/可能不会被截断的文本之后

Question

所以我想要这样的东西:

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

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

Hello Worl...[小 Sprite ]

hell ...[更大的跨度]

想法？

Answer 1

更新想法

这是我下面的原始想法的改进版本，但尝试使用额外的包装 div 来创建您在聊天中提到的容器的固定宽度和一般外观。我认为这可以完全通过 css 工作的唯一方法是让你事先知道你的“徽章”区域的最大宽度可能是，然后设置你的文本区域的 max-width 为容器的宽度减去徽章区域的潜在最大宽度。下面是修改后的代码和fiddle example ，我假设一个 200px 容器，最大 100px 徽章区域宽度。您最终会看到一些文本被“过早地”截断(例如，看起来它可能会变宽，但我们将它限制在一定的空间内；请参阅 fiddle 中的第三行)。

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;   
}

See a fiddle example.