Internet Explorer 11文字换行功能无法正常工作

Question

看起来在IE 11中，对于元素，自动换行功能不再起作用。在IE 10及其之前版本、Firefox、Safari和Chrome中，自动换行的效果符合预期。</p> <p>IE 11没有实现任何自动换行功能。我已经尝试在<textarea>标签中添加"wrap=hard"，以及在CSS中添加"word-wrap:normal;"。</p> <p>有其他人遇到过这个问题吗？如果有，你找到解决方法了吗？Windows正在推送这个更新，这种不一致的行为正在成为一个问题。</p> <p>感谢你能提供的任何帮助。</p> <p>这是我目前的<textarea>标签：</p><pre class="guess-Ini"><code><textarea class="wrklst-report_text" id="report_text_6586427" name="report_text[6586427]" title="Report Box" data-exam_seq="6586427" style="width:95%;"></textarea> </code></pre><p>这是我的计算出的CSS样式</p><pre class="guess-CSS"><code>-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; </code></pre>

- wesley

---

不要重复。你没有展示任何东西或者你是错的。 - user1228

您需要指定实际的输入数据来重现问题，解释您期望发生的事情以及实际发生的情况。"不工作"并不是一个问题描述。 - Jukka K. Korpela

我找到了问题。非常感谢您的帮助，这对我很有帮助。看起来IE 11现在会让textarea元素继承其父div的“white-space”属性。 - wesley

韦斯利是正确的。我遇到了同样的问题，设置 white-space: pre-wrap; 解决了这个问题。这个问题很容易重现：创建一个包含超过文本框宽度的句子的固定宽度的文本框的HTML页面。使用IE 11打开HTML文件，您会发现下一个文本没有换行。 - Jean-François Beauchamp

Answer 1

为了确保未来访问此问题的人能够明显看到答案，本问题的提问者（wesley）在问题下方的评论中回答了这个问题：

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

解决方法是将 white-space: pre-wrap 应用于 textarea，如 Jean-François Beauchamp 指出的那样。

- johnkavanagh

---

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

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

使用此方法来显示只读输入，需要注意它会解释字符串开头处的空格。 - Ricardo Saracino

Answer 2

添加 CSS

 {width: 100%} 

这将使文本根据其标签换行

- Ylli Gashi

Answer 3

我来这里是因为遇到了一个问题，即IE11上的 word-wrap 无法正常工作；

{width: 100%} 的解决方案对我有效。

- bpylearner

Answer 4

我遇到了类似的问题，并通过将word-wrap样式更改为word-break样式来解决：

{ word-break: break-all; }

- Phil

---

我看到你使用Internet Explorer回答了超过3年的问题。 - Janis Jansen

Answer 5

我在IE（11.431.16299.0）中遇到了一个类似的下拉问题，我通过应用以下两种样式来解决它

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

- Sajith

Answer 6

问题在IE 11中得到解决，方法是应用样式 { word-break: break-all; }。

- Vinit Sharma

Answer 7

请注意，IE11在兼容模式下无法正确地换行。 要访问它，请单击Alt，Tools，Internet Options，Security，Local intranet，Sites，Advanced。 看看列表中有什么。

- BenV136

Answer 8

这不是你特定问题的答案。

这是针对问题标题“Internet Explorer 11 单词换行不起作用”的通用答案。

当我在谷歌上搜索如何使 IE11 中的单词换行功能正常工作时，这是第一个结果，所以我在此发布此答案以帮助其他试图解决如何使 IE11 中的单词换行正常工作的人。

---

在支持IE11的情况下实现单词换行最好的CSS属性是使用以下代码：

word-wrap: break-word;

这允许过长的单词被分割，但仍允许较长但不是过于长的单词被放置在下一行。 它在所有浏览器中都适用，不仅仅是IE11和现代浏览器。

在下面的图像中，“m”字符是连续的长M行，在行末被分割。

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

- Daniel Tonon