Question

我有这个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;
}

问题：如果可用宽度太小，图标会换行到下一行。我希望它与它附加到的链接的最后一个字保持在同一行：

enter image description here

这是否可行，没有在整个链接上添加'nowrap'（我希望单词包装，而不是图标）。

请参阅jsFiddle here。

Answer 1

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>

Answer 2

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

在word中添加一个类 <strong class="test">word</strong>

和.test:after { ...

http://jsfiddle.net/52dkR/

诀窍也是使该类成为inline-block

如果你想保留下划线，请看这个。

http://jsfiddle.net/atcJJ/

添加text-decoration:inherit;

Answer 3

这与之前的答案有点相似，但我认为我会把它充实并完全解释。

一旦设置display: inline-block，:after就会成为非文本绑定元素。这就是它包装的原因，以及为什么nowrap没有效果。所以请单独留下display。

由于默认情况下它是文本元素，因此只要内容之间没有空格，内容就会绑定到上一个文本。所以不要添加任何内容，但请确保您拥有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中运行良好。并且由于图标仍然是文本元素，即使是绑定后的直接文本，因此任何关闭标点符号也会包装。

Answer 4

我遇到了同样的问题。我真的不喜欢在最后一个单词中添加强标签或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/

Answer 5

请确保在

之前结束标记

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

Answer 6

可以在没有: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/

Answer 7

我尝试使用链接按钮，并且最成功的是在@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;
}

Here's a JS Fiddle.

Answer 8

当元素的文本结尾处有空格时，就会出现此问题，因此它将图标视为另一个单词。我的解决方案是使用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/

Answer 9

如果使用图标字体：使用“不间断空格” 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 example

Answer 10

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

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>

阻止：从包装到下一行的元素之后

10 个答案: