CSS 防止 :after 元素换行到下一行

prevent :after element from wrapping to next line

提问by ptriek

I have this HTML:

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

I'm appending an icon using the :after pseudo element:

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

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

The problem: if the available width is too small, the icon wraps to the next line. I would want it to stay on the same line as the last word of the link it's appended to:

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

Is this doable, without adding 'nowrap' to the entire link (I want the words to wrap, just not the icon).

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

See jsFiddle here.

请参阅此处的jsFiddle 。

采纳答案by btevfik

you can add the image to the last word instead. that will make it break together.

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

add a class to word <strong class="test">word</strong>

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

and .test:after { ...

和 .test:after { ...

http://jsfiddle.net/52dkR/

http://jsfiddle.net/52dkR/

the trick is also to make that class to be inline-block

诀窍还在于使该类成为 inline-block

and if you want to keep the underline see this.

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

http://jsfiddle.net/atcJJ/

http://jsfiddle.net/atcJJ/

add text-decoration:inherit;

添加 text-decoration:inherit;

回答by Hugo Silva

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

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

Add a negative margin to the pseudo element, to compensate its width:

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

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

Now, that is going to make the icon overflow the container, and the line is going to break only when the text meet the end of the line. If you need to maintain the icon inside the original container width, you can add padding to compensate again:

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

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

---

---

IMPORTANT UPDATE:

重要更新：

For this method to work, there must be no white space between the text and the closing tag of the element holding the pseudo element. Even though the pseudo element's width is compensated by a negative margin, the white space will make the line break when it meets the edge of the parent element. For example, this works:

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

<span>text goes here</span>

and this doesn't:

而这不会：

<span>
    text goes here
</span>

回答by Phernost

This is a little similar to a previous answer, but I thought that I'd flesh it out and explain it fully.

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

As soon as you set display: inline-block, :afterbecomes a non-text-binding element. This is why it wraps, and why nowrap has no effect. So leave displayalone.

一旦设置display: inline-block,:after就成为非文本绑定元素。这就是它包装的原因，也是 nowrap 不起作用的原因。所以别管了display。

As it's a text element by default, the content binds to previous text, as long as there's no whitespace between them. So don't add any, but make sure you have content: "", or it's the same as display: none. The only problem is heightand widthare controlled by the content, which in this case is collapsed. So widthis 0, and heightis the line height.

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

Resize the area with padding; left or right, it doesn't matter. Add a little marginso the icon doesn't touch the text. Keep everything as relative sizes (em, pt, etc.), and use background-size: contain, so that the icon scales with the text, like an emoji or font. Finally position the icon where you want with background-position.

用填充调整区域大小；向左或向右，都无所谓。添加一点，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 */
}

I've used this for my external links (a[href*="://"]:after), and it's worked fine in Firefox, Chrome, and iOS. And since the icon remains a text element, even direct text after it binds, so any closing punctuation will wrap too.

我已经将它用于我的外部链接 ( a[href*="://"]:after)，它在 Firefox、Chrome 和 iOS 中运行良好。而且由于图标仍然是一个文本元素，即使是绑定后的直接文本，所以任何结束标点符号也会换行。

回答by Jason

I was having the same issue. I didn't really like the idea of adding strong or span tags to the last word, so I tried simply adding the icon as a background image with some padding-right instead of using the :after or :before pseudo elements. Worked for me!

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

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

回答by Jase

If using an icon font: Using the "non-breaking space" unicode \00a0along with the pseudo-element content (in this case a Font Awesome glyph).

如果使用图标字体：使用“不间断空格”unicode\00a0以及伪元素内容（在本例中为 Font Awesome 字形）。

This works without any extra mark-up or special formatting or classnames.

这不需要任何额外的标记或特殊格式或类名。

a[href^='http']::after {
  content: '
<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>
a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

The line-height: 0;part keeps the lines from twitching when the last 'word + icon' wrap.

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

CodePen example

代码笔示例

回答by Supriti Panda

Please make sure you end the tag before

请确保您在结束标签之前

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

Try the below css. Instead of using "after" use "before" and float right.

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

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

Please check this: http://jsfiddle.net/supriti/atcJJ/7/

请检查这个：http: //jsfiddle.net/supriti/atcJJ/7/

回答by Svyat P.

It is possible to do it without :after. The element with background should be display:inline.

没有:after. 具有背景的元素应该是display:inline.

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

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

http://jsfiddle.net/my97k7b1/

http://jsfiddle.net/my97k7b1/

回答by Mary7678

I was attempting this with a link button and had the most success with adding padding to the right of the element as @Hugo Silva suggested, then setting the ::after to absolute position. This was a pretty simple solution and seemed to work across modern browsers.

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

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

Here's a JS Fiddle.

这是一个 JS 小提琴。

回答by Archie Butler

With my particular set up, the only working solution was to use position relative, and place my icon element in a span with a position absolute. Like so:

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

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

$(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(" ");
    }
  });
});

回答by PoseLab

The problem occurs when there is whitespace at the end of the text of the element, so it considers the icon as another word. My solution is to remove the white space with javascript and put it outside the element. Also, this way we avoid that text-decoration:underlinestyles the white space that may be at the end of a link:

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

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

In the css I add a non-breaking space \00A0before the icon to separate it from the text, and to scale according to the font-size. In some cases, using a narrow no-break space \202Foffers a better visual effect:

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

##代码##

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

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