解決Firefox中斷字的解決方法

Question

我使用樣式white-space: pre和word-wrap: break-word的聯合，允許在textarea中的任何位置使用軟換行，而不管字邊界如何。

textarea { font-family: monospace; white-space: pre; word-wrap: break-word; }

<textarea cols="40" rows="10"> 
 
(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234) 
 
</textarea>

這就是我想要，什麼我越來越除了Firefox的所有瀏覽器。

這是Firefox的呈現：顯然，word-wrap風格被忽略。

最後，讓我表明，如果white-space: pre被刪除會發生什麼。注意括號之後的行是如何斷開的。在這種情況下，word-wrap: break-word完全沒有區別。我也不想要這個。

所以我的問題是，我怎麼能說服火狐格式化我的樣本用戶輸入一個textarea像第一張圖片，使軟包裝紙的任何字符之後？

Answer 1

您需要使用word-break: break-all;和white-space: pre-line;

textarea { 
 
    font-family: monospace; 
 
    white-space: pre-line; 
 
    word-break: break-all; 
 
    word-wrap: break-word; 
 
}

<textarea cols="41" rows="10">(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)(ABCDefgh1234)</textarea>