La representación de texto en el front-end es el escenario de aplicación más común, pero a veces es necesario poder reconocer los saltos de línea en una cadena.
Los datos que salen del back-end pueden ser así, con un símbolo de retorno de carro en el medio, requiriendo que el front-end se pueda mostrar en una nueva línea.
Si no
se procesa, el símbolo de retorno de carro no se puede reconocer y no se puede mostrar correctamente.
Para la interfaz, usar CSS para controlar es la forma más fácil.
.scf-textarea-text {
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
el espacio en blanco se utiliza para controlar los espacios en blanco y los saltos de línea de las cadenas de texto
normal：忽略多余的空白，只保留一个空白（默认）；
pre：保留空白(行为方式类似于html中的pre标签)；
nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
pre-wrap：保留空白符序列，正常地进行换行；
pre-line：合并空白符序列，保留换行符；
inherit：从父元素继承white-space属性的值。
el ajuste de palabras generalmente usa palabras de ruptura
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
word-break generalmente usa break-all
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-warp: la diferencia entre break-word y word-break: break-all
si no hay dos atributos
Figura 1
Si solo hay word-warp: break-word, cuando la palabra es demasiado larga, la parte de la palabra que es demasiado larga se cambiará a la siguiente línea.
Figura 2
Si todavía hay un salto de palabra: romper todo
Figura 3
En conclusión
Obviamente, estos dos atributos aparentemente idénticos tienen funciones completamente diferentes.
word-warp: break-word es cambiar la parte sobrante de una palabra a la siguiente línea.
La función de word-break: break-all es que si una palabra es demasiado larga, el espacio restante en esa línea no encajará y la palabra no comenzará a representarse en otra línea.
Debido a que la situación predeterminada del navegador es salto de palabras: normal,
si el espacio restante en una línea de texto no puede acomodar la siguiente palabra, esa palabra comenzará a representar la primera letra en otra línea. Aparecerá la situación de la Figura 2