Html 在CSS格式的链接中使用：before时避免换行

我在CSS中使用：before将图像预先添加到我网站上的某些链接

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

不幸的是，如果没有太多的空间，图像和文本是分开的

vs。

如果将图像绑定到链接中的第一个单词（在HTML中，我会使用

）就好了。CSS中是否有类似的功能

编辑： 试试这个：

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

---

Fiddle:如果我理解你的问题，那么如果元素不够宽，无法容纳它们，你就试图不让图像在文本下缠绕

---

溢出和空白的组合：nowrap可能会得到您想要的结果。

至少在Firefox中，这不起作用。如果将窗口缩小，图像将保留在第一行，而“外部”将转到第二行，…等等。Lemme发布了一个相同提琴的屏幕截图。@Sven在Chrome 24和Firefox 18.0.2中截图。需要更多的IE 7、8、9吗PI在我的帖子中添加了一个屏幕截图，当窗口很小时显示JSFIDLE。图像没有用“外部”环绕，但图像与“外部”分开（至少在Firefox中是这样）。如果您将有一个宽度变小的用例，请添加

空白：nowrap到它。：）见答案：）嗯，应该可以在链接中进行包装，但不能在第一个单词和“before”图像之间进行包装。如果我设置了
空白：nowrap
，这也将防止长链接文本被环绕。