如何在 Chrome 中进行断词：打破所有工作？答案

【问题标题】：How to make word-break: break-all work in Chrome?如何在 Chrome 中进行断词：打破所有工作？
【发布时间】：2018-10-30 22:42:05
【问题描述】：

我有一个这样的文本区域：

textarea {
  background: lightgray;
  border: none;
  font: 16px/16px Courier;
  resize: none;
  word-break: break-all;
}

<textarea cols="40" rows="10 wrap="hard">
[[Lorem]][[ipsum]][[dolor]][[sit]][[amet]][[consectetur]][[adipiscing]][[elit]][[sed]][[do]][[eiusmod]][[tempor]][[incididunt]][[ut]][[labore]][[et]][[dolore]][[magna]][[aliqua]][[Ut]][[enim]][[ad]][[minim]][[veniam]][[quis]][[nostrud]][[exercitation]][[ullamco]][[laboris]][[nisi]][[ut]][[aliquip]][[ex]][[ea]][[commodo]][[consequat]][[Duis]][[aute]][[irure]][[dolor]][[in]][[reprehenderit]][[in]][[voluptate]][[velit]][[esse]][[cillum]][[dolore]][[eu]][[fugiat]][[nulla]][[pariatur]][[Excepteur]][[sint]][[occaecat]][[cupidatat]][[non]][[proident]][[sunt]][[in]][[culpa]][[qui]][[officia]][[deserunt]][[mollit]][[anim]][[id]][[est]][[laborum]]
</textarea>

在 Firefox 中，我看到：screenshot

但在 Chrome 中，换行符是乱码：screenshot

我如何告诉 Chrome 在正好 40 个字符后换行，而不是更少或更多，就像 Firefox 一样？

【问题讨论】：

标签： html css textarea

【解决方案1】：

将hyphens 和word-break 与其他工具包一起使用。希望对您有所帮助。

textarea {
  background: lightgray;
  border: none;
  font: 16px/16px Courier;
  resize: none;

   word-break: break-all;
  -ms-word-break: break-all;
   word-break: break-all;   
  
 word-break: break-word; /* Non standard for WebKit */
 -webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

<textarea cols="40" rows="10 wrap="hard">
[[Lorem]][[ipsum]][[dolor]][[sit]][[amet]][[consectetur]][[adipiscing]][[elit]][[sed]][[do]][[eiusmod]][[tempor]][[incididunt]][[ut]][[labore]][[et]][[dolore]][[magna]][[aliqua]][[Ut]][[enim]][[ad]][[minim]][[veniam]][[quis]][[nostrud]][[exercitation]][[ullamco]][[laboris]][[nisi]][[ut]][[aliquip]][[ex]][[ea]][[commodo]][[consequat]][[Duis]][[aute]][[irure]][[dolor]][[in]][[reprehenderit]][[in]][[voluptate]][[velit]][[esse]][[cillum]][[dolore]][[eu]][[fugiat]][[nulla]][[pariatur]][[Excepteur]][[sint]][[occaecat]][[cupidatat]][[non]][[proident]][[sunt]][[in]][[culpa]][[qui]][[officia]][[deserunt]][[mollit]][[anim]][[id]][[est]][[laborum]]
</textarea>

【讨论】：

抱歉，还是坏了。