Question

如果您在链接的开头插入某些内容（图标或其他内容），当链接包裹在页面边缘时，如何阻止浏览器在图标和文本之间插入换行符。即：用这个：

a:before {
    font-family: FontAwesome;
    content: "\f101\00a0";
    font-size: 0.9em;
    opacity: 0.7;
    text-decoration: none;
    display: inline-block;

}

目前，如果你调整浏览器窗口的大小，就像这样的html：

<p>
This is some example text where my link
<a href="...">link</a> is having its icon on the
previous line.
</p>

可能会呈现如下内容：

这是我的链接％
的示例文本 link 在上一行显示了其图标。

Answer 1

尝试将white-space:nowrap添加到a元素（而不是:before伪元素）

但是请记住，如果文本实际上不能适合窗口中的一行，这可能会导致问题。

即。 http://jsfiddle.net/A4VcV/4/

Answer 2

删除display:inline-block;

http://jsfiddle.net/ApaYP/

在Mac Firefox，Safari和Chrome上测试过。

希望这有帮助！

Answer 3

我更喜欢position: absolute;这类事。这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
a {position: relative; padding-left: 1em;}
a:before {
    font-family: FontAwesome;
    content: "\f101\00a0";
    font-size: 0.9em;
    opacity: 0.7;
    text-decoration: none;
    position: absolute;
    left: 0;
    vertical-align: middle;
}
</style>
</head>
<body>

<p>This is some example text where my link <a href="...">link</a> is having its icon on the previous line.</p>

</body>
</html>

你如何防止“a：before”和“a”元素之间的“中断”

3 个答案: