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

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

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

这是可行的,没有在整个链接上添加'nowrap'(我希望单词包装,而不是图标).

在这里查看jsFiddle .

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

我尝试使用链接按钮进行此操作，并按照 @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 小提琴。

Answer 6

如果使用图标字体：使用“不间断空格”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;当最后一个“单词+图标”换行时，该部分可防止线条抽搐。

代码笔示例