css3 - 防止:将元素包装到下一行之后

  显示原文与译文双语对照的内容
0 0

我有个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;
}

此问题: 如果可用宽度太小,图标换行到下一行。 我希望它保持原状所在行的最后一个单词的链接则将它追加到:

enter image description here

这是可行的,无需添加'nowrap'整个链接( I 希望单词换行,只要不是Icon ) 。

请参见jsFiddle 这里

时间:原作者:6个回答

0 0

可以将图像添加到最后一个word打开。 它将成为打破在一起。

将类添加到word <strong class="test">word</strong>

.test:after { ...

http://jsfiddle .net/52dkR/

关键是你还使该类可 inline-block

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

http://jsfiddle .net/atcJJ/

添加 text-decoration:inherit;

原作者:
0 0

jsfiddle http://jsfiddle .net/Bk38F/3/

添加负边距到伪元素,以抵消其宽度:

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

现在,某种能让Icon溢出容器级以及线就跑仅当满足行尾的文本。 如果需要保持Icon到原来的容器宽度,可以再次添加补偿:

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

我出现了同样的问题。 我不是真的喜欢让强或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/

原作者:
0 0

请确保你之前结束标记

<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 。 而不是使用" 之前" 和" 使用" float right后

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/

原作者:
...