防止 :after 元素换行到下一行答案

【问题标题】：prevent :after element from wrapping to next line防止 :after 元素换行到下一行
【发布时间】：2013-04-19 09:01:46
【问题描述】：

我有这个 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 here。

【问题讨论】：

你能改变 HTML 吗？还是你被它困住了？
是的，我可以修改 HTML..

标签： css

【解决方案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;
}

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

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

重要更新：

要使此方法起作用，文本和包含伪元素的元素的结束标记之间不能有空格。即使伪元素的宽度被负边距补偿，空白也会在遇到父元素的边缘时使换行。例如，这有效：

<span>text goes here</span>

而这不是：

<span>
    text goes here
</span>

【讨论】：

在我看来这是更优雅的解决方案，因为不需要额外的标记。我唯一的抱怨是图标和文本之间的任何间距都需要添加到图像中，边距/填充不起作用。
这是处理表格单元格时要走的路（在显示时确定列宽）
@brendanmckeown 如果你让宽度变大，你可以改变背景位置。所以width:26px; 和2px 0 作为背景位置会移动它。 jsfiddle.net/Bk38F/23
@brendanmckeown：您可以使用边距在图标和文本之间留出空间。使用pseudo的左边距来做空间，把它的负右边距设为它的宽度和左边距之和：{width:24px;左边距：10px；右边距：-34px }
此解决方案不起作用。至少在 Chrome 中，我仍然可以找到图标在最后一个单词之前换行的屏幕尺寸。这种解决方案不会经常发生，但仍有可能。

【解决方案2】：

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

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

和.test:after { ...

http://jsfiddle.net/52dkR/

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

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

http://jsfiddle.net/atcJJ/

添加text-decoration:inherit;

【讨论】：

我不认为强元素中总会有最后一句话。
太棒了，确实像一个魅力...... @HerrSerker 强元素只是为了清楚起见，我在每个最后一个单词中插入了一个<span class="icon">，并将图标附加到这个span跨度>
@HerrSerker 我也在第二个 jsfiddle 中将强元素变成了 span。我认为这是为了清楚起见。
我试过这个，它在换行时将元素带到第二行。这是如何运作的？ jsfiddle.net/supriti/atcJJ/5
这个答案不够笼统。您希望特定的 HTML 标记始终位于您想要的位置。

【解决方案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 中运行良好。而且由于图标仍然是一个文本元素，即使是绑定后的直接文本，所以任何结束标点符号也会换行。

【讨论】：

这很适合:after。知道如何使它也适用于 :before 吗？

【解决方案4】：

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

【讨论】：

【解决方案5】：

我遇到了同样的问题。我真的不喜欢在最后一个单词中添加强或跨度标签的想法，所以我尝试简单地将图标添加为背景图像，并带有一些填充权，而不是使用 :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/

【讨论】：

【解决方案6】：

我正在尝试使用链接按钮进行此操作，并且按照@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.

【讨论】：

【解决方案7】：

请确保在标签结束之前

<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。不要使用“after”，而是使用“before”并向右浮动。

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/

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

哇，谢谢！我一直在挣扎，没有帖子解决我的问题..但使用content: '\00A0'; 是诀窍。

【解决方案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>

【讨论】：

【解决方案11】：

我刚刚用过： white-space: nowrap; 为我工作！

【讨论】：