Question

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

enter image description here

也许相关的问题 - Link arrows dropping to new line，但我不能使用背景字体图标... 带有font-icon的原始代码：

<!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>

Answer 1

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

＆＃13;

.titleResult {
    white-space: normal;
}

.resultHeader, .nowrap {
    white-space: nowrap;
}

＆＃13;

<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>

＆＃13;

nowrap字体图标（或图像）和链接之间

1 个答案: