防止：after元素换行到下一行

我有这个HTML：

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

我使用：after伪元素附加一个图标：

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

问题：如果可用宽度太小，图标将换行到下一行。我希望它与附加到该链接的最后一个单词相同的行：

这是可行的，而无需在整个链接中添加“ nowrap”（我希望包装文字，而不是图标）。

在这里查看jsFiddle 。

您可以将图像添加到最后一个单词。它将使其分解在一起。

给单词添加一个类 <strong class="test">word</strong>

和 .test:after { ...

http://jsfiddle.net/52dkR/

技巧还在于使该类成为 inline-block

如果您想保留下划线，请参见此。

http://jsfiddle.net/atcJJ/

加 text-decoration:inherit;

JSFiddle- http://jsfiddle.net/Bk38F/65/

向伪元素添加负边距，以补偿其宽度：

ul li.completed a:after {
    background:transparent url(img1.png) no-repeat; 
    content: ' ';
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: -24px;
}

现在，这将使图标溢出容器，并且仅当文本遇到行尾时，行才会中断。如果需要将图标保持在原始容器宽度内，则可以添加填充以再次补偿：

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

重要更新：

为了使此方法起作用，在文本和包含伪元素的元素的结束标记之间必须没有空格。即使伪元素的宽度由负边距补偿，但空白空间在遇到父元素的边缘时也会使该行断开。例如，这有效：

<span>text goes here</span>

而且这不是：

<span>
    text goes here
</span>

这有点类似于先前的答案，但是我认为我会充实并充分解释它。

一旦设置display: inline-block，它便:after成为非文本绑定元素。这就是为什么包装的原因，而nowrap无效的原因。所以，别display管它。

由于默认情况下它是一个text元素，因此内容会绑定到先前的文本，只要它们之间没有空格。因此，请勿添加任何内容，但请确保您具有content: ""，或者与相同display: none。唯一的问题是height，width并且由所控制content，在这种情况下该处于折叠状态。所以width是0和height是行高。

用填充来调整区域的大小；左或右，没关系。添加一点，margin使图标不会触及文本。保持所有内容为相对大小（em，pt等），并使用background-size: contain，以便图标随文本缩放，例如表情符号或字体。最后，使用将图标放置在所需的位置background-position。

ul li.completed a:after {
  content: "";
  background: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em; /* spacing*/
  padding-right: 0.75em; /* sizing */
}

我已将其用于外部链接（a[href*="://"]:after），并且在Firefox，Chrome和iOS中运行良好。而且由于图标仍然是文本元素，因此即使在绑定后仍是直接文本，因此任何结束标点也将自动换行。

我有同样的问题。我真的不喜欢在最后一个单词上添加强标签或span标签的想法，因此我尝试仅将图标作为背景图像添加一些带有右填充的地方，而不是使用：after或：before伪元素。为我工作！

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last word</a></li></ul>

ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}

http://jsfiddle.net/atcJJ/36/

如果使用图标字体：使用“不间断空格” unicode\00a0和伪元素内容（在这种情况下为Font Awesome字形）。

此方法无需任何额外的标记或特殊格式或类名。

a[href^='http']::after {
  content: '\00a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

line-height: 0;当最后一个“单词+图标”换行时，该部分可防止线条抽动。

CodePen示例

请确保您在结束标签之前

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></a></li></ul>

试试下面的CSS。而不是使用“之后”，而使用“之前”并向右浮动。

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

请检查以下内容：http : //jsfiddle.net/supriti/atcJJ/7/

没有可能做到:after。具有背景的元素应为display:inline。

<h1><span>I want the icon to stay on the same line as this last word</span></h1>

h1 span {
   padding-right: 24px;
   background: url('icon.svg') no-repeat right top; 
}

http://jsfiddle.net/my97k7b1/

我尝试使用链接按钮进行此操作，并成功地按照@Hugo Silva的建议在元素右侧添加了填充，然后将:: after设置为绝对位置。这是一个非常简单的解决方案，似乎可以在现代浏览器中使用。

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

这是一个JS小提琴。

当元素文本的末尾有空格时，就会出现此问题，因此它将图标视为另一个单词。我的解决方案是使用javascript删除空白并将其放在元素外部。同样，通过这种方式，我们避免text-decoration:underline了对链接末尾的空白进行样式设置：

$(document).ready(function () {
  $("a[href$=\".pdf\"]").each(function () {
    var endspace = /\s$/;
    if (endspace.test($(this).html())) {
      var linktx = $(this).html().replace(/\s*$/, "");
      $(this).html(linktx);
      $(this).after(" ");
    }
  });
});

在css中，我\00A0在图标之前添加了一个不间断的空格，以将其与文本分开，并根据字体大小进行缩放。在某些情况下，使用狭窄的不间断空间\202F可提供更好的视觉效果：

a[href$=".pdf"]:after {
  content: "\00A0\f1c1";
  font-family: "Font Awesome 5 Pro";
}

https://jsfiddle.net/poselab/910bw7zt/8/

在我的特定设置下，唯一可行的解​​决方案是使用相对位置，并将我的图标元素放置在绝对位置的范围内。像这样：

h2 a {
            position: relative;
            width: auto;
}
h2 a span {
            position: absolute;
            right: -30px;
            bottom: 0;
 }

<h2>
    <a href="#">
            The arrow won't drop to the next line as an orphan, even if the text is long and responsive
         <span>&#8594;</span>
    </a>
</h2>