Empêcher les sauts de ligne avec CSS

— astuce css dans un composant React🧚

Tant que la route est bonne, tu n'as pas peur de la route loin —

Récemment, j'ai rencontré un problème intéressant, disons qu'il y a des éléments de liste à afficher en utilisant le code React de base comme ci-dessous 👇

un très simple
  • …

✨ Notez que ces éléments doivent être côte à côte (en ligne et bien sûr sans aucun saut de ligne ) comme le résultat ci-dessous👇

vue listes réactives

J'ai écrit des css simples : ✏️

Je veux que les éléments soient côte à côte affichage : en ligne

Et le résultat était

Opérations, sauts de ligne 🙅‍♀️

Voir les sauts de ligne ? Assez laid…

Voici ma solution simple :

éviter les sauts de ligne

C'est ça! 🌸

La white-spacepropriété CSS définit la façon dont les espaces blancs à l'intérieur d'un élément sont gérés, elle réduit les espaces blancs, mais elle ne permet pas l'enveloppement.

La overflowpropriété abrégée CSS définit le comportement souhaité pour le débordement d'un élément — c'est-à-dire lorsque le contenu d'un élément est trop gros pour tenir dans son contexte de formatage de bloc — dans les deux sens.

La text-overflowpropriété CSS définit la manière dont le contenu de débordement masqué est signalé aux utilisateurs. Il peut être tronqué, afficher des points de suspension (' …') ou afficher une chaîne personnalisée.

C'était une astuce css simple et rapide, j'espère qu'elle vous plaira ! 💫

Merci d'avoir lu!

Suggested posts

Éviter les conséquences dévastatrices d'un accident vasculaire cérébral : apprendre du parcours d'une famille.

Éviter les conséquences dévastatrices d'un accident vasculaire cérébral : apprendre du parcours d'une famille.

Introduction Un accident vasculaire cérébral est une urgence médicale qui peut frapper n'importe qui à tout moment. Elle survient lorsque le flux sanguin vers une partie du cerveau est perturbé, entraînant une perte soudaine de la fonction cérébrale.

Feuille de style de café : le café comme couleur

Dans cette infographie idiote, j'imagine comment le café pourrait être exprimé s'il était représenté de la même manière que les couleurs CSS.

Feuille de style de café : le café comme couleur

Ils disent que les développeurs ne pourraient travailler que pour le café. Je ne pense pas que ce soit vrai (mais peut-être pas trop loin non plus).

Related posts

Qu'est-ce qui rend un podcast influent ?

Qu'est-ce qui rend un podcast influent ?

La semaine dernière, j'ai remarqué un communiqué de presse, envoyé via PressGazette (un site Web d'information britannique). L'article annonçait qu'Acast, la société d'hébergement et de publicité de podcasts de Scandi, dirigerait un consortium d'éditeurs "probablement les plus influents" du podcasting.

Pourquoi certains freelances simulent leur vie

Pourquoi certains freelances simulent leur vie

J'étais récemment sur Linkedin, le plus grand réseau social professionnel au monde, et j'ai trouvé des messages de designers indépendants que je suis et qui ont attiré mon attention. Ils ont tous posté des photos d'avions, sur la plage avec leurs ordinateurs portables, de piscines et de bureaux avec une vue imprenable.

Rassembler OSINT pour la chasse aux menaces

Rassembler OSINT pour la chasse aux menaces

Salut les cyber-amateurs ! Bienvenue à nouveau dans la série OSINT pour la chasse aux menaces. Dans le premier article, je vous ai donné un aperçu d'OSINT et de son importance dans la chasse aux menaces.

Comment sauver la planète et gagner de l'argent

Comment sauver la planète et gagner de l'argent

Combien de fois avez-vous jeté une bouteille en plastique, un bocal en verre, une canette en aluminium ou un paquet d'énergie verte sans réfléchir à deux fois ? Combien de fois avez-vous souhaité pouvoir obtenir quelque chose en échange de leur recyclage ? Si vous êtes comme la plupart des gens, la réponse est probablement plusieurs fois. Le recyclage est souvent perçu comme un tracas, une corvée ou un devoir qui n'apporte aucun bénéfice immédiat ou tangible.