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

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。

7 个解决方案

#1

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 word 中添加一个类

and .test:after { ...

和.test：{...之后

http://jsfiddle.net/52dkR/

http://jsfiddle.net/52dkR/

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

诀窍也是使该类成为内联块

and if you want to keep the underline see this.

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

http://jsfiddle.net/atcJJ/

http://jsfiddle.net/atcJJ/

add text-decoration:inherit;

添加文本装饰：继承;

#2

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:before {
    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:

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

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>

#3

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!

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

#4

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, :after becomes a non-text-binding element. This is why it wraps, and why nowrap has no effect. So leave display alone.

只要设置display：inline-block，：after就成为非文本绑定元素。这就是它包装的原因，以及为什么nowrap没有效果。所以不要单独显示。

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 height and width are controlled by the content, which in this case is collapsed. So width is 0, and height is the line height.

由于它是默认的文本元素，因此只要内容之间没有空格，内容就会绑定到以前的文本。所以不要添加任何内容，但要确保你有内容：“”，或者它与display：none相同。唯一的问题是高度和宽度由内容控制，在这种情况下，内容是折叠的。因此宽度为0，高度为线高。

Resize the area with padding; left or right, it doesn't matter. Add a little margin so 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.

用填充物调整区域大小;向左或向右，没关系。添加一点边距，使图标不触及文本。将所有内容保存为相对大小（em，pt等），并使用background-size：contains，以使图标与文本一起缩放，如表情符号或字体。最后将图标放在背景位置所需的位置。

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.

我已经将它用于我的外部链接（[href * =“：//”]：after），它在Firefox，Chrome和iOS中运行良好。并且由于图标仍然是文本元素，即使是绑定后的直接文本，因此任何关闭标点符号也会包装。

#5

Please make sure you end the tag before

请确保您之前结束标记

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

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

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

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

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

请查看：http：//jsfiddle.net/supriti/atcJJ/7/

#6

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

没有：之后可以做到这一点。带背景的元素应显示：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/

http://jsfiddle.net/my97k7b1/

#7

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设置为绝对位置。这是一个非常简单的解决方案，似乎适用于现代浏览器。

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

这是一个JS小提琴。