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

时间:2014-01-28 00:49:17

标签: html css

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

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 在上一行显示了其图标。

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

删除display:inline-block;

http://jsfiddle.net/ApaYP/

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

希望这有帮助!

答案 2 :(得分:1)

我更喜欢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>