Internet Explorer 11 自动换行不起作用

Posted 2023-03-06

【中文标题】Internet Explorer 11 自动换行不起作用

【英文标题】：Internet Explorer 11 word wrap is not working

【发布时间】：2013-12-07 14:52:34

【问题描述】：

在 IE 11 中，自动换行似乎不再适用于 textarea 元素。在 IE 10 及更早版本中，FF、Safari 和 Chrome 自动换行按预期工作。

IE 11 没有实现任何自动换行。我尝试将“wrap=hard”添加到 textarea 标签并添加“word-wrap: normal;”到 CSS。

还有其他人遇到过这个问题吗？如果是这样，您是否找到了解决方案。 Windows 正在推出此更新，不一致的行为正在成为一个问题。

感谢您提供的任何帮助。

这是我当前的 textarea 标签

<textarea class="wrklst-report_text" id="report_text_6586427" name="report_text[6586427]" title="Report Box" data-exam_seq="6586427" style="width:95%;"></textarea>

这是我计算出来的 CSS

-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 1px;
color: rgb(0, 0, 0);
cursor: auto;
display: inline-block;
flex-direction: column;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
height: 300px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre-wrap;
width: 950px;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;

【问题讨论】：

无复制。您没有显示某些内容，或者您​​弄错了。

您需要指定重现问题的实际输入数据，解释您预期会发生什么以及会发生什么。 “不工作”不是问题描述。

我发现了问题。非常感谢您的意见。它有很大帮助。似乎 IE 11 现在让 textarea 元素从其父 div 继承“空白”属性。

韦斯利是对的。我刚遇到同样的问题，设置white-space: pre-wrap;解决了这个问题。这个问题不是很难重现：创建一个 html 页面，其 textarea 具有固定宽度并包含一个比 textarea 宽度长的句子。使用 IE 11 打开 HTML 文件，你会看到下一个没有换行。

【参考方案1】：

为了确保将来访问此问题的人清楚答案：OP (wesley) 自己在问题下方的 cmets 中回答了该问题：

问题的原因是 Internet Explorer 11 使 textarea 元素继承了应用于直接父级的 white-space 属性。

解决方案是将white-space: pre-wrap 应用于文本区域，由Jean-François Beauchamp 标识。

【讨论】：

textarea white-space: pre-wrap; 在 CSS 中解决了我的问题，谢谢！

在 Maximo 中，也存在同样的问题。在 textarea 之前的样式标记中，我必须添加 white-space: pre-wrap 以便文本区域正确换行。 ——例如overflow: white-space: pre-wrap;" maxlength="32000" -- 在 Chrome 43 和 Firefox 38 中没有这个问题。

使用它来显示只读输入它有解释字符串开头的空白的警告。

【参考方案2】：

请注意，IE11 在兼容模式下不会正确换行。要获得它，请单击 Alt、工具、Internet 选项、安全性、本地 Intranet、站点、高级。查看该列表中的内容。

【参考方案3】：

添加 CSS

 width: 100% 

这会将文本包装到它的标签中

【参考方案4】：

我来到这里是为了解决一个不同的问题，即自动换行在 IE11 上不起作用；

width: 100% 解决方案确实对我有用。

【参考方案5】：

我有一个类似的问题，并通过将自动换行样式更改为分词样式来解决它：

 word-break: break-all; 

【讨论】：

我看到你用IE浏览器来的，3年多了才回复。

【参考方案6】：

我在 IE (11.431.16299.0) 上的下拉菜单中遇到了类似的问题，我通过应用以下两种样式进行了修复

white-space:pre-wrap;
word-break:break-all;

【参考方案7】：

问题已在 IE 11 中通过将样式应用为 分词：打破所有；

【参考方案8】：

这不是您具体问题的答案。

这是对“Internet Explorer 11 word wrap is not working”问题标题的一般回答。

这是 Google 在搜索如何在 IE11 中进行自动换行时的第一个结果，因此我在此处发布此答案以帮助其他人试图弄清楚如何在 IE11 中进行自动换行。

---

以支持 IE11 的方式实现自动换行的最佳 CSS 属性是：

word-wrap: break-word;

这允许太长而无法拆分的单词，但它仍然允许将长但不是太长的单词放在下一行。它也适用于所有浏览器，不仅适用于 IE11，也适用于现代浏览器。

在下图中，“m”字符是一长串连续的 M，在行尾被断开。

“o”字符是一个连续的长行 O，不足以让单词分开，但足够长，需要将 O 放在下一行。