Html Internet Explorer 11 自动换行不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20149715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 11 word wrap is not working
提问by wesley
It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome word wrapping works as expected.
似乎文字换行不再适用于 IE 11 中的 textarea 元素。在 IE 10 及更早版本中，FF、Safari 和 Chrome 自动换行按预期工作。
IE 11 is not implementing any word wrapping. I have tried adding "wrap=hard" to the textarea tag and also adding "word-wrap: normal;" to the CSS.
IE 11 没有实现任何自动换行。我曾尝试在 textarea 标签中添加“wrap=hard”并添加“word-wrap: normal;” 到 CSS。
Has anyone else encountered this problem? If so, have you found a solution. Windows is pushing out this update and the inconsistent behavior is becoming a problem.
有没有其他人遇到过这个问题？如果是这样，您是否找到了解决方案。Windows 正在推出此更新，不一致的行为正在成为一个问题。
Thanks for any help you can provide.
感谢您的任何帮助，您可以提供。
Here is my current textarea tag
这是我当前的 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>
This is my computed CSS
这是我计算的 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;
回答by johnkavanagh
In order to ensure that the answer is obvious to people visiting this question in the future: the OP (wesley) answered the question himself in the comments beneath the question:
为了确保将来访问此问题的人的答案显而易见：OP（韦斯利）在问题下方的评论中亲自回答了该问题：
The cause of the problem is that Internet Explorer 11 makes textareaelements inherit whatever white-spaceproperty is applied to the direct parent.
问题的原因是 Internet Explorer 11 使textarea元素继承white-space应用于直接父级的任何属性。
The resolution is to apply white-space: pre-wrapto the textarea, as identified by Jean-Fran?ois Beauchamp.
决议适用white-space: pre-wrap于由Jean-Fran?ois Beauchamp确定的 textarea 。
回答by Ylli Gashi
add CSS
添加 CSS
{width: 100%}
this will wrap the text to its tag
这会将文本包装到其标签
回答by bpylearner
I got here for a different problem where word-wrap wasn't working on IE11;
我来这里是因为一个不同的问题，即自动换行在 IE11 上不起作用；
The {width: 100%}solution did work for me.
该{width: 100%}解决方案确实对我有用。
回答by Phil
I had a similar issue and solved it by changing the word-wrap styling to word-break styling:
我有一个类似的问题，并通过将自动换行样式更改为断字样式来解决它：
{ word-break: break-all; }
回答by Sajith
I faced a similar issue for a drop-down on IE (11.431.16299.0)and I fixed by applying both below style
我在 IE (11.431.16299.0) 上的下拉菜单中遇到了类似的问题，我通过应用以下样式进行了修复
white-space:pre-wrap;
word-break:break-all;
回答by Vinit Sharma
The issue was solved in IE 11 by applying the style as { word-break: break-all; }
该问题在 IE 11 中通过将样式应用为 { word-break: break-all; }
回答by BenV136
Note that IE11, in compatibility mode, will not wrap lines correctly. To get at it, click Alt, Tools, Internet Options, Security, Local intranet, Sites, Advanced. See what is in that list.
请注意，IE11 在兼容模式下不会正确换行。要获得它，请单击 Alt、工具、Internet 选项、安全、本地 Intranet、站点、高级。查看该列表中的内容。
