換行不起作用

Question

這是我剛創建的一個div。當我輸入內容時，我給出了一個White-space: Normal函數用於換行。該功能可在Chrome，Opera和Safari瀏覽器中使用。但這些文字並未包含在Mozilla Firefox和Edge瀏覽器中。我也嘗試了Word-wrap: break-word函數。這也不起作用。請給我一個解決方案。

<div class = "list-name-field" id = "SAVE_LIST" style = "white-space: normal; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>

Answer 1

您需要添加word-break: break-all如果您需要打破一個長字

<div class = "list-name-field" id = "SAVE_LIST" style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>

Answer 2

試試這個DEMO

加入CSS：

word-wrap:break-word 

Answer 3

使用以下屬性：

white-space: -moz-pre-wrap;//For firefox 
word-wrap: break-word; 

和HTML：

<div class = "list-name-field" id = "SAVE_LIST" style =" width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; white-space: -moz-pre-wrap; word-wrap: break-word; margin-right: auto; background-color: #ccc; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."></div>