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

所以我想要这样的东西：

Hello [element]

但在这种情况下：

Hello blahblahblah... [element]

将元素向右浮动可以实现这一点，我不希望：

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

编辑：

我尝试的html是：

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

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

编辑2：

意识到不清楚我是否希望容器h3具有固定的最大宽度。因此，基本上，如果标记和跨度的组合宽度大于最大宽度，那么跨度将把截断位置放在左侧。像这样：

字符串是：你好，世界

因此，在这种情况下，它可能是这样的：

你好，世界…[小艾尔]

见鬼…[大跨度el]

想法？

更新想法 这是我在下面的原始想法的改进版本，但尝试使用额外的包装

div

创建您在聊天中提到的固定宽度的容器和一般外观。我认为这完全可以通过css实现的唯一方法是，您事先知道“徽章”区域的最大宽度可以是多少，然后将文本区域的

最大宽度设置为容器的宽度减去徽章区域的潜在最大宽度。下面是修改后的代码，我假设一个
200px
容器，最大宽度为
100px
徽章区域宽度。最后，一些文本会“过早地”被删除（如中所示，它可能会变得更宽，但我们将其限制在一定的空间内；请参见小提琴中的第三行）

HTML

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

原意
也许这会奏效

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

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

HTML

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

原意
也许这会奏效

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

为什么不将跨度放在锚点之后呢？结果是，它成为溢出的一部分，因为css位于容器上。现在，我正在尝试将css移动到a标记。这是什么样的[element]？如果它是一个图像，那么您可以使用
：在
之后，它可能包含很多标记，例如多个图像，它们本质上是一个徽章的集合。试试看，为什么不将跨度放在锚点之后？结果是，它成为溢出的一部分，因为css位于容器上。现在，我正在尝试将css移动到a标记。这是什么样的[element]？如果它是一个图像，那么您可以使用
：在
之后，它可能包含许多标记，例如多个图像，它们本质上是一个徽章的集合。请尝试如此接近，但是想象一下，如果a标记具有相同的宽度，但其中一个标记旁边的跨度较大。我希望容器元素的最大宽度是固定的，比如说200。因此，如果span和a标记的宽度超过200px，a标记将被截断。随着跨度越来越大，截断显示的文本将越来越少，基本上被推到左侧。这在我意识到的问题中并不清楚，所以我将对其进行编辑。@prashn64--在
span
中[element（s）]是否有一个最大宽度，或者它是否可以占据
h3
的整个宽度？理论上是的，Scott，但考虑到我拥有的徽章数量，它实际上不够宽。@prashn64--根据你最初的帖子，您似乎也不希望[element]和标记之间有间隙（正如您右侧的float示例所示）。如果是这样，你似乎想要不可能的东西。您希望在[elements]上正确对齐（不管宽度），截断
a
标记中的长文本，但如果
a
较短，则两者之间不会有间隙（至少我是这样解释的）。哪一个更重要，短
a
文本或徽章的右对齐没有中心间隙？如果[element]的宽度设置为h3的剩余宽度，例如，如果h3的宽度设置为200px，而a标签的宽度为100px，[element]无论内容如何，都将获得100px的宽度。然后它可以向右浮动，而不是与h3在视觉上向右对齐。这在CSS中是可能的，还是仅仅是一个javascript攻击？很接近，但想象一下，如果a标记具有相同的宽度，但其中一个标记旁边的跨度更大。我希望容器元素的最大宽度是固定的，比如说200。因此，如果span和a标记的宽度超过200px，a标记将被截断。随着跨度越来越大，截断显示的文本将越来越少，基本上被推到左侧。这在我意识到的问题中并不清楚，所以我将对其进行编辑。@prashn64--在
span
中[element（s）]是否有一个最大宽度，或者它是否可以占据
h3
的整个宽度？理论上是的，Scott，但考虑到我拥有的徽章数量，它实际上不够宽。@prashn64--根据你最初的帖子，您似乎也不希望[element]和标记之间有间隙（正如您右侧的float示例所示）。如果是这样，你似乎想要不可能的东西。你想要对吗