Front-end rendering of text is the most common application scenario, but sometimes it is required to be able to recognize line breaks in a string.
The data coming out of the back end may be like this, with a carriage return symbol in the middle, requiring the front end to be able to display in a new line.
If you don't deal with it, there
is no way to recognize the carriage return symbol and it can't be displayed correctly.
For the front end, using css to control is the easiest way.
.scf-textarea-text {
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
white-space is used to control the whitespace and line breaks of text strings
normal：忽略多余的空白，只保留一个空白（默认）；
pre：保留空白(行为方式类似于html中的pre标签)；
nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
pre-wrap：保留空白符序列，正常地进行换行；
pre-line：合并空白符序列，保留换行符；
inherit：从父元素继承white-space属性的值。
word-wrap generally uses break-word
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
word-break generally uses break-all
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-warp: the difference between break-word and word-break:break-all
if there are no two attributes
Figure 1
If there is only word-warp: break-word, when the word is too long, the part of the word that is too long will be changed to the next line.
Figure 2
If there is still word-break: break-all
Figure 3
in conclusion
Obviously, these two seemingly identical attributes have completely different functions.
word-warp: break-word is to change the excess part of a word to the next line.
The function of word-break:break-all is that if a word is too long, the remaining space on that line will not fit, and the word will not start rendering on another line.
Because the browser's default situation is word-break: normal,
if the remaining space in a line of text cannot accommodate the next word, then that word will start rendering the first letter on another line. The situation in Figure 2 will appear