Résoudre le problème de la non-reconnaissance des espaces et des sauts de ligne dans l'affichage du texte et des chaînes

Préface : Dans le développement quotidien, nous rencontrons souvent des zones de saisie ou des affichages de texte qui nécessitent que le texte ou la chaîne conserve son format d'origine. L'accent inclut les problèmes d'espaces de début et de fin et de sauts de ligne au milieu. Lors de l'affichage de texte directement dans React, les caractères de début et de fin seront supprimés directement. Problèmes avec les espaces et les sauts de ligne.

Dans un développement normal, il est parfois nécessaire d'utiliser des espaces de début et de fin ou des sauts de ligne pour occuper des espaces afin d'améliorer simplement et grossièrement les problèmes de formatage.

Exemple:

 1. Affichage de texte simple. Le code affiche uniquement l'effet.

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

2. Affichage des variables

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

La plupart des effets implémentés seront ignorés par le navigateur.

donc! ! ! Afin de résoudre ce problème, il suffit d'ajouter un attribut de style à sa boîte pour compléter l'affichage de l'effet.

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

Si vous avez réussi à résoudre le problème, n'oubliez pas de revenir et de donner un like ! ! 

Introduction aux attributs étendus : dérivés de l'attribut d'espace blanc CSS

L'attribut white-space définit la façon dont les espaces dans un élément sont gérés.

attribut d'espace blanc
normale	défaut. Les espaces blancs sont ignorés par le navigateur.
pré	L'espace blanc sera conservé par le navigateur. Il se comporte comme la balise <pre> en HTML.
maintenant	Le texte n'est pas renvoyé à la ligne ; le texte continue sur la même ligne jusqu'à ce qu'une balise <br> soit rencontrée.
pré-emballage	Les séquences d'espaces sont conservées, mais les nouvelles lignes sont normalement renvoyées à la ligne.
pré-ligne	Fusionnez les séquences d'espaces mais conservez les nouvelles lignes.
tu hérites	Spécifie que la valeur de l'attribut espace blanc doit être héritée de l'élément parent.