У меня есть такое текстовое поле:
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 я вижу это: Скриншот
Но в Chrome разрывы строк искажены: Скриншот
Как я могу сказать Chrome, чтобы он разрывал строку ровно через 40 символов, но не меньше или больше, точно так же, как это делает Firefox?
Используйте 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>
извините, все еще не работает.