自动换行：断词在 IE9 中不起作用答案

【问题标题】：Word-wrap: break-word not working in IE9自动换行：断词在 IE9 中不起作用
【发布时间】：2012-12-03 22:11:57
【问题描述】：

我有一个隐私字段（值是收件人：或密件抄送：）和一个从我的数据库输出的电子邮件地址字段。我希望电子邮件地址始终位于收件人：/密件抄送：之后，并且当电子邮件地址太长时不要下移一行。

按钮是 position: absolute 所以它不应该影响文本位置。

我的数据库中最长的电子邮件地址（到目前为止）是 41 个字符。

我已使用此方法在电子邮件地址到达单元格末尾时将其拆分，电子邮件地址的其余部分将在下一行继续：

<tr>
<td>Email:</td>
<td style="word-wrap: break-word"><?php echo $Privacy; ?> <span><?php echo $Email; ?></span> <button class="copy">COPY</button></td>
</tr>

... 这在 IE9 中不起作用。在需要进行换行之前，我需要为隐私字段（密件抄送：）提供至少 5 个字符，然后是 36 个字符。

我是否将 CSS 用于其他目的？文本换行似乎不再受支持。是否需要 JavaScript 或 PHP 来解决这个问题？

谢谢

【问题讨论】：

刚刚看到这个似乎对 OP 有帮助的类似答案。也许它也会对你有所帮助。 stackoverflow.com/questions/16098785/…

标签： javascript html css

【解决方案1】：

在 Internet Explorer 以外的浏览器中（可能在 IE9 中）是overflow-wrap。

<td style="overflow-wrap: break-word">

您可以尝试两种样式。编辑试试-ms-word-wrap IE9。

【讨论】：

这些都没有工作抱歉。可能必须是 javascript
不幸的是，我的页面似乎坏了！单元格没有指定宽度，所以我指定了一个，然后使用 overflow:hidden;word-wrap: break-word;-ms-word-wrap: break-word;overflow-wrap: break-word;仍然没有喜悦。我什至删除了密件抄送：和电子邮件地址之间的空格——只是让单元格更宽以容纳整个区域。这让我发疯了！！！

【解决方案2】：

尝试给 td 一个固定的宽度，然后将内容放入一个应用了样式的 div 中。例如：

<td style="width:300px;">
    <div style="width:300px;overflow-wrap:break-word;">
        <?php echo $Privacy; ?> 
        <span><?php echo $Email; ?></span> 
        <button class="copy">COPY</button>
    </div>
</td>

【讨论】：

【解决方案3】：

我将我的标签放在一个 div 中，并赋予它最终工作的样式

<div style="word-wrap: normal; word-break: break-all;">
<asp:Label ID="Label2" runat="server" Text='<%# Bind("REASON") %>'></asp:Label>
</div>

【讨论】：