我的文字最后带有图片。如果文本和图像没有空间,则图像绝对不能在第二行上单独显示。我通过white-space: nowrap;
结合硬汉词和图片来做到这一点。问题在于将鼠标悬停在图像上会触发文本上的悬停。我试图弄清楚如何避免这种情况。这是我的代码:
的HTML:
<p class="parent">
<span>This is a long word This is a long word This </span>
<span class="nowrap">long<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"
style="width:102px;height:80px"/>
</span>
</p>
CSS:
.parent:hover {
text-decoration: underline;
}
.nowrap
{
white-space: nowrap;
}
jsfiddle:http : //jsfiddle.net/5pbk9djp/27/
我只想用CSS做到这一点。您可以添加其他类并更改html的结构,只要该图标在没有文本的第二行上没有出现即可。
悬停在图像上不应在文本下划线
ew,这是一个艰难的过程。诀窍是使整个事情变得完整nowrap
,然后使除最后一个单词外的所有内容都可以包装在其中。最难的部分是<span>
正确嵌套。
这是一个有效的JSFiddle:http : //jsfiddle.net/troygizzi/k33qw3nk/
HTML:
<span class="nowrap"><span class="hoverable"><span class="wrappable">This is a long word This is a long word This</span>
long</span><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" style="width:102px;height:80px" />
CSS:
.hoverable:hover {
text-decoration: underline;
}
.nowrap {
white-space: nowrap;
}
.wrappable {
white-space: normal;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句