1

我后面有一个链接和图标（字体）。需要防止链接和图标之间的换行：对于长链接，换行符应该出现在单词之间而不是单词和图标之间。我已经创建了带有 nowrap 的父块和带有包装的内部块，它在 FireFox 中工作，但在 Chrome 和 IE（例如 IE10）中不起作用。出于测试目的，我还使用图像（而不是图标）创建了相同的布局并具有相同的结果 - http://jsfiddle.net/6ak7q/2/ - 当我更改窗口大小时，我看到在新行上只有图像一言不发。

在此处输入图像描述

也许相关的问题 -链接箭头下降到新行，但我不能使用字体图标的背景......带有字体图标的原始代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        @font-face {
            font-family: 'Glyphicons Regular';
            src: url('../fonts/glyphicons-regular.eot');
            src: url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') format('woff'), url('../fonts/glyphicons-regular.ttf') format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        .glyphicons {
            display: inline-block;
            position: relative;
            color: #1d1d1b;
            text-decoration: none;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
        }

        .glyphicons.nl-icons.unlock {
            font: 12px 'Glyphicons Regular';
            height: 12px;
            padding: 0 5px;
            width: 22px;
        }

        .glyphicons.unlock:before {
            content: "\E205";
        }
//added for old IE
        .glyphicons.unlock {
            zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xE205;');
        }

        body {
            font-size: 11px;
        }

        .titleResult {
            white-space: normal;
        }

        .resultHeader {
            white-space: nowrap;
        }

    </style>
</head>
<body>
<div style="width:30%">
    <div class="resultHeader">
        <span class="titleResult"><a href="example.com">Test long title Test long title Test long title Test
                    long title Test long title Test long title</a></span><span
            class="small nl-icons glyphicons green unlock"></span>
    </div>
</div>
</body>
</html>
4

1 回答 1

3

将图标和文本保持在另一个范围内并nowrap为此应用类。

.titleResult {
    white-space: normal;
}

.resultHeader, .nowrap {
    white-space: nowrap;
}
<div style="width:30%">
    <div class="resultHeader">
            <span class="titleResult">Test long title Test
                    long title Test long <span class="nowrap">title <img
                src="https://www.google.com/images/srpr/logo4w.png" height="15"/></span></span>
    </div>
</div>

于 2014-07-04T07:57:32.037 回答