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。

在第一个小提琴中，您的HTML看起来像：

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

虽然浏览器显示文本前后的空格，但它包含空格，并且在呈现:after元素时，好像发生了这样的事情：

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

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

在第二个小提琴中，你正在使用：

<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。

Answer 2

有趣的是，我发现你只需更改一行代码即可。测试jsFiddle中的.container2元素，更改此

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline-block;
}

到

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline;
}

它似乎适用于我设置容器的任何宽度，并将保持与foo将会保持的连接。

Answer 3

您可以使用负边距图标和css变换的宽度。这里有一个小提琴怎么做：

＆＃13;

    .container {
        width: 50px;
    }
    .icon-circle {
        background:black;
        height:10px;
        width:10px;
        display: inline-block;   
        margin-left:5px;
    }
    .ANSWER{
        display:block;
        padding-right:15px; /* width of the icon */
    }
    .ANSWER .icon-circle{
        margin-left:-10px;
        transform:translate(15px);
    }

＆＃13;

    <h4>What we want</h4>
    <div class="this-is-how-it-should-wrap">
        foo bar<i class="icon-circle"></i>
    </div>

    <div style="margin-top:25px"></div>

    <h4>What happenned</h4>
    <div class="container NORMAL">
        foo bar<i class="icon-circle"></i>
    </div>

    <div style="margin-top:25px"></div>

    <h3>The answer</h3>
    <div class="container ANSWER">
        foo bar<i class="icon-circle"></i>
    </div>

＆＃13;

度过美好的一天！

Answer 4

对于任何尝试在css中未指定常量/静态图标但在html中指定不同图标的人，我发现了一种有趣的方法。

HTML：

<h3>
    Long String Of Text
    <a class="anchor" href="">
        <i class="fas fa-link"></i>
    </a>
</h3>

CSS：

.anchor {
    white-space: nowrap
}
.anchor:before {
    content: '';
}

如果您不使用Font Awesome图标作为链接，则可以将上方的<a>替换为<span>。

这似乎在Chrome和Firefox中有效。我相信它起作用的原因是described here。我认为让:before以某种方式“附加”到上一个单词...

Also see this related StackOverflow question。

编辑：嗯，看来Troy's answer中也提到了此问题的原因。

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

4 个答案: