html - 将字体图标附加到文本字符串中的最后一个单词并防止换行

Question

我想在文本字符串的最后一个单词上附加一个 Font Awesome 图标:

foo bar●

但是如果需要换行，我希望图标附加到最后一个单词并将它们包装在一起:

foo
bar●

我的问题非常类似于:
Prevent :after element from wrapping to next line

但是，该解决方案假定我可以访问最后一个词。就我而言，文本将动态生成。是否有一种 css/html-only 方法来确保图标用最后一个字换行？

这是一个 jsfiddle .

Answer 1

我只是想指出为什么@Unmocked 提供的更改实际上有效，它与 difference between display: inline and display: inline-block 有关。 .

为了解释一下，这里有一些关于 block 之间差异的背景知识。显示和 inline展示。

块显示
block元素通常是导致布局的元素。它们接收自己的边界框，并能够在一定程度上插入其他元素，以适应浏览器渲染区域内的可用空间。 block 的示例元素包括:h1 , p , ul , 和 table .请注意，默认情况下，这些元素中的每一个都开始一个新行，并在关闭时结束自己的行。换句话说 - 他们通过创建自己的段落级部分来适应文本块。

内嵌显示
inline元素通常与文本一起显示。换句话说，它们被设计为显示 - 在 线路的文本。示例包括 i , b , 或 span .请注意，默认情况下，这些元素中的每一个都继续其周围文本的流动，而不会在其自身之前或之后强制换行。

进入中途案例...

内嵌块显示
inline-block是以上两者的混合体。本质上，一个 inline-block元素从其前面的文本离开的地方开始，并尝试适应文档流 inline .但是，如果它到达需要 wrap 的点，它会下降到一个新行，就像一个 block元素。随后的文本将紧跟在 inline-block 之后继续。元素，并继续正常包装。这可能会导致一些奇怪的情况。

这是一个例子，以表明我的意思。要查看它的实际效果，请查看 this cssdesk snippet .



在您的示例中，您设置了 :after伪元素为 display: inline-block - 这意味着当它碰巧超出环绕显示的最右侧边界时，它的作用类似于示例中的浅蓝色文本 - 并被包裹为一个块。当您改为更改 :after 时元素到 display: inline ，它使它像任何其他文本一样运行 - 并且它和前面的字母之间没有空格，自动换行会按照您的意愿运行。

我希望这有帮助!

注:在你原来的 fiddle 之间改变的另一件事和 updated one是消除white-space围绕文本。

在第一个 fiddle 中，您的 HTML 如下所示:

<div class="container2">
    foo bar
</div>

虽然浏览器不显示文本前后的空格，但它确实包含空格，并且当 :after元素被渲染，就好像这正在发生:

<div class="container2"> foo bar :after</div>

浏览器将多个空格压缩为单个空格，但仍然在单词 "bar" 之间放置一个空格。和 :after元素。就像任何其他单词之间的空格一样，这将导致在 "bar" 之后发生换行。但之前:after在一定的宽度。

在第二个 fiddle 中，您正在使用:

<div class="container-wide">foo bar</div>
<div class="container-narrow">foo bar</div>

在这种情况下，因为 "foo bar" 后面没有空格字符串，浏览器呈现 :after元素紧跟在内容字符串的结尾之后显示。这好像正在发生:

<div class="container-narrow">foo bar:after</div>

无中断 inline - 渲染文本意味着没有中断。

有关演示此操作的示例，请参阅 this update到你的 jsFiddle。