Resuelva el problema de no reconocer espacios y saltos de línea en la visualización de texto y cadenas

Prefacio: en el desarrollo diario, a menudo nos encontramos con cuadros de entrada o pantallas de texto que requieren que el texto o la cadena mantenga su formato original. El enfoque incluye los problemas de espacios iniciales y finales y saltos de línea en el medio. Cuando se muestra texto directamente en React, los caracteres iniciales y finales se eliminarán directamente Problemas con espacios y saltos de línea.

En el desarrollo normal, ocasionalmente es necesario utilizar espacios iniciales y finales o saltos de línea para ocupar espacios y mejorar de manera simple y cruda los problemas de formato.

Ejemplo:

 1. Visualización de texto simple. El código solo muestra el efecto.

<div>    文本显示   格式如下    </div>    
// 实际输出 '文本显示    格式如下'
// 想要的效果 '    文本显示    格式如下    '

2. Visualización de variables

const  a='    艾欧尼亚！
                 昂扬不灭！
                    洛克萨斯即将崛起！'
 <div>{a}</div>  
 //实际输出   '艾欧尼亚！昂扬不灭！洛克萨斯即将崛起！'  
 //想要的效果  '    艾欧尼亚！
                 昂扬不灭！
                    洛克萨斯即将崛起！' 

El navegador ignorará muchos de los efectos implementados.

¡por lo tanto! ! !Para resolver este problema, solo necesitamos agregar un atributo de estilo a su cuadro para completar la visualización del efecto.

white-space: pre-wrap;//解决 React 中的字符串不识别换行和多个空格的问题。

Si ayudaste exitosamente a resolver el problema, ¡recuerda volver y darle me gusta! ! 

Introducción a los atributos extendidos: derivados del atributo de espacio en blanco CSS

El atributo de espacio en blanco establece cómo se manejan los espacios en blanco dentro de un elemento.

atributo de espacio en blanco
normal	por defecto. El navegador ignora los espacios en blanco.
pre	El navegador conservará los espacios en blanco. Se comporta como la etiqueta <pre> en HTML.
ahorarap	El texto no se ajusta; el texto continúa en la misma línea hasta que se encuentra una etiqueta <br>.
pre-envoltura	Las secuencias de espacios en blanco se conservan, pero las nuevas líneas se ajustan normalmente.
pre-linea	Fusione secuencias de espacios en blanco pero conserve las nuevas líneas.
tu heredas	Especifica que el valor del atributo de espacio en blanco debe heredarse del elemento principal.