Question

我有一个非常基本的警报框如下：

<div class="row">
    <div class="col-md-4">
        <p class="alert alert-info" role="alert" style="margin-top: 0.25em;">
            <i class="glyphicon glyphicon-info-sign"></i> 
            You can send us files that end in: .jpg .gif .png .bmp .psd .pdf .doc 
            .docx .ppt .pptx .xls .xlsx .vsd .txt .tiff.
        </p>
    </div>
</div>

在IE中，文本部分＆＃34; .vsd .txt .tiff。＆＃34;不知何故最终超出了盒子的范围。

下面是一个jsfiddle，调整视图面板的大小以查看问题：

http://jsfiddle.net/7um8L6yz/

我是否必须专门为IE进行自动强制换行？

Answer 1

出现Internet Explorer（版本6到11）会使.foo<space>模式混淆为不允许中断的模式。为了证实这一点，我创建了一个简单的脚本，将模式复制了一千次：

for ( var i = 0; i < 1000; i++ ) {
    document.body.appendChild(
        // Note the trailing space after .wut
        document.createTextNode( ".wut " )
    );
}

当然，Internet Explorer会生成横向溢出，而不是将文本包装在最合适的空白实例中。我在Internet Explorer团队工作，并将为我们的团队打开一个问题，以进一步调查这是否是故意的。

您可以使用逗号（ .foo，.bar ）关注每个扩展程序：

<p class="alert alert-info" role="alert" style="margin-top: 0.25em;">
    <i class="glyphicon glyphicon-info-sign"></i> 
    You can send us files that end in: .jpg, .gif, .png, .bmp, .psd, .pdf, .doc, 
    .docx, .ppt, .pptx, .xls, .xlsx, .vsd, .txt, .tiff.
</p>

This will successfully wrap as expected。然而，这确实增加了文本的详细程度。

或者，您可以明确指示IE更频繁地中断：

.alert { word-break: break-all }

这似乎可以解决您遇到的问题，但是您可能会发现太快。唯一的另一种选择是修改内容，以便明确说明每次扩展后可能发生中断：

// Run after document has been populated with all .alert-info elements
$( ".alert-info" ).contents().each(function ( i, o ) {
    if ( o.nodeType === 3 ) {
        $( o ).replaceWith(function () {
            return o.nodeValue.replace( /\s+/g, " &shy;" );
        });
    }
});

当然，这并不理想，但不幸的是，这是我们暂时可以做的。

Answer 2

这个问题似乎是由IE解释字符串的这一部分引起的： .jpg .gif .png .bmp .psd .pdf .doc .docx .ppt .pptx .xls .xlsx .vsd .txt .tiff.
一个字。我不确定为什么会这样做，但在此部分中的不同文件扩展名之后插入确实允许它正确地包装所有内容。

.alert { word-break: break-all }似乎在这个词的中间收支平衡，但它看起来肯定更容易。

在上查看此帖子 How to prevent long words from breaking my div?

Answer 3

更新了fiddle

<div class="row">
 <div class="col-md-4"> <pre class=" alert alert-info" role="alert" style="margin-top:0.25em;">
<p><i class="glyphicon glyphicon-info-sign"></i> You can send us files that end in:     </p>            
.jpg .gif .png .bmp .psd .pdf .doc .docx .ppt .pptx .xls .xlsx .vsd .txt .tiff.</pre>

 </div>
</div>

与IE的奇怪的Bootstrap 3文本包装问题

3 个答案: