16

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

foo bar●

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

foo
bar●

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

但是，该解决方案假定我可以访问最后一句话。就我而言，文本将动态生成。是否有一种仅限 css/html 的方法来确保图标与最后一个单词一起换行？

这是一个jsfiddle。

4

3 回答 3

14

我只是想指出为什么@Unmocked 提供的更改确实有效，它与display: inline 和 display: inline-block 之间的区别有关。

block为了解释，这里有一点关于显示和inline显示之间的区别的背景知识。

块显示

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

内嵌显示

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

进入中途案例...

内嵌块显示

inline-block是上述两者的混合体。本质上，一个inline-block元素从它前面的文本离开的地方开始，并试图适应文档流inline。但是，如果它到达它需要的点，wrap它将下降到一个新行，就好像它是一个block元素一样。随后的文本将紧跟该inline-block元素，并继续正常换行。这可能会导致一些奇怪的情况。

这是一个例子，以说明我的意思。要查看它的实际效果，请查看这个 cssdesk 片段。

在此处输入图像描述

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

我希望这有帮助！

注意：在您的原始小提琴和更新的小提琴之间发生变化的另一件事是消除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渲染文本意味着没有中断。

有关演示这一点的示例，请参阅对您的 jsFiddle 的此更新。

于 2013-04-29T22:50:49.567 回答
8

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

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

至

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

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

于 2013-04-29T01:46:43.970 回答
2

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

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

祝你今天过得愉快！

于 2015-06-09T19:32:40.627 回答