使用时避免换行：在CSS格式的链接之前

Question

我将图像添加到我网站上的某些链接，使用：在CSS之前

a.ext:before {
    content:            url(./_img/ext.png);
}

不幸的是，如果空间不大，那么图像和文本就会分开。

与

如果图像绑定到链接中的第一个单词（在HTML中我会使用 ），那就太棒了。 CSS中有类似的东西吗？

编辑：

Answer 1

试试这个：

a.ext {
    padding-left: 15px;
    position: relative;
    white-space: nowrap; /* use this if you don't want the text to wrap */
}
a.ext:before {
    content: " ";
    background: url("https://www.azdes.gov/uploadedImages/icon_external_link.png") center center no-repeat transparent;
    display: block;
    width: 15px;
    height: 1.2em;
    left: 0;
    top: 0;
    position: absolute;
}

截图

Chrome 24和Firefox 18.0.2中的截图。在IE 7,8,9中需要更多？ ：P

小提琴：http://jsfiddle.net/praveenscience/TXPJE/1/

Answer 2

如果我理解你的问题，那么如果元素的宽度不足以容纳它们，你就试图不让图像包裹在文本下面。

溢出和空白的组合：nowrap可能会得到您正在寻找的结果。