93

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

4

11 回答 11

95

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>
于 2014-09-15T22:38:16.707 回答
19

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

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

和.test:after { ...

http://jsfiddle.net/52dkR/

诀窍也是使该课程成为inline-block

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

http://jsfiddle.net/atcJJ/

添加 text-decoration:inherit;

于 2013-04-19T09:17:11.503 回答
19

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

一旦设置display: inline-block,:after就成为非文本绑定元素。这就是它会换行的原因，也是 nowrap 无效的原因。所以别管display了。

由于默认情况下它是一个文本元素，因此只要它们之间没有空格，内容就会绑定到以前的文本。所以不要添加任何东西，但要确保你有content: ""，或者它与display: none. 唯一的问题是height并且width由 控制content，在这种情况下它是折叠的。也是，width是线高。0height

使用填充调整区域大小；左或右，无所谓。添加一点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 中运行良好。而且由于图标仍然是文本元素，即使是绑定后的直接文本，所以任何结束标点符号也会换行。

于 2016-07-17T05:44:44.300 回答
8

如果使用图标字体：使用“不间断空格”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;部件可防止线条抽搐。

代码笔示例

于 2018-12-11T21:55:08.343 回答
7

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

于 2014-06-27T18:43:57.087 回答
4

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

于 2018-01-05T19:58:49.790 回答
3

请确保您在结束标签之前

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

于 2013-04-19T09:11:30.013 回答
3

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

于 2016-12-23T09:23:32.933 回答
2

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

于 2020-04-13T14:57:28.170 回答
0

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

于 2021-08-16T07:40:00.240 回答
0

对于我的特定设置，唯一可行的解​​决方案是使用相对位置，并将我的图标元素放置在具有绝对位置的跨度中。像这样：

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>

于 2020-03-15T22:39:25.233 回答