Comment puis-je empêcher des mots longs de briser mon div ?
Parfois, les développeurs doivent afficher des mots longs sur les pages Web. Par exemple, affichez des URL, des noms de fichiers longs, etc. Parfois, la longueur du mot est supérieure à la longueur du conteneur parent et le mot détruit le conteneur.
Par exemple, nous avons créé une carte pour afficher les détails du fichier et le nom du fichier était très long, ce qui pourrait casser la carte et cela semble toujours pire. Par conséquent, les développeurs doivent empêcher les mots longs de briser les éléments div en les encapsulant.
Avant de commencer la solution, comprenons le problème à travers un exemple.
Exemple 1 (div de décomposition de mots longs)
Dans l'exemple ci-dessous, nous avons créé un élément div et ajouté un élément "p" à l'intérieur de l'élément div. De plus, nous avons ajouté des mots longs au texte de l'élément « p ».
En CSS, nous définissons une taille fixe de l'élément div. Dans la sortie, l'utilisateur peut observer quand le mot rompt l'élément div et en déborde.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2 id="Long-words-breaking-the-div-in-HTML"> Long words breaking the div in HTML5 </h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Utilisez la propriété CSS Word-break pour casser les mots
Dans cette méthode, nous utiliserons la propriété CSS « word-break » pour empêcher les mots de casser l'élément div. L'attribut "word-break" nous permet de décider comment les mots doivent être brisés lorsqu'ils dépassent la largeur du conteneur.
Besoin de valeurs différentes pour passer le mot. La valeur "normale" coupe les mots uniquement aux points d'arrêt spécifiés (par exemple, espaces, tirets, etc.). La valeur "break-all" coupe le mot à chaque caractère qui déborde, et la valeur "keep-all" ne coupe jamais le mot. mot.
Ici, nous utiliserons la valeur « break-all » pour séparer le mot de n'importe quel caractère.
Grammaire
Les utilisateurs peuvent utiliser la propriété CSS « word-break » selon la syntaxe suivante pour empêcher les mots longs de casser les éléments div.
word-break: break-all;
Exemple 2 (empêcher les mots longs de briser le div)
Dans l'exemple ci-dessous, nous avons ajouté le mot long que nous avons ajouté dans le premier exemple à l'intérieur de l'élément div conteneur. En CSS, nous utilisons la propriété « word-break » et la valeur « break-all » pour empêcher les mots de casser les éléments div.
Dans la sortie, nous pouvons observer que le mot se sépare d'un caractère spécifique et que les caractères restants du mot sont affichés dans la ligne suivante.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.5rem;
}
.long-word {
word-break: break-all;
}
</style>
</head>
<body>
<h2> Preventing the long words breaking the div in HTML5
</h2>
<div class = "container">
<p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
</div>
</body>
</html>
Utiliser l'attribut Overflow-wrap
L'attribut "overflow-wrap" nous permet de décider comment le contenu de l'élément doit être renvoyé lorsqu'il déborde de l'élément parent. Nous pouvons utiliser la valeur "break-word" de l'attribut "overflow-wrap" pour empêcher les mots longs de casser l'élément div par retour à la ligne.
Grammaire
Les utilisateurs peuvent utiliser la propriété CSS « overflow-wrap » pour envelopper les mots longs selon la syntaxe suivante.
overflow-wrap: break-word;
Exemple 3
Dans l'exemple ci-dessous, nous avons ajouté un mot très long comme texte de l'élément "p". Après cela, nous utilisons l'attribut "overflow-wrap" de l'élément parent pour envelopper le contenu débordé dans la ligne suivante en cassant les mots.
Dans le résultat, nous pouvons voir que le mot est interrompu au milieu et que les caractères restants sont affichés sur la ligne suivante.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
</h3>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
</body>
</html>
Exemple 4 (définir l'attribut Overflow-wrap à l'aide de JavaScript)
Parfois, nous devons utiliser JavaScript pour empêcher les mots longs de briser le div. Par exemple, nous obtenons les données du produit de la base de données, si le nom du produit est très long, nous pouvons utiliser l'attribut "overflow-wrap" pour un produit spécifique pour envelopper le nom long du produit.
En JavaScript, nous pouvons accéder à l'élément HTML et utiliser la propriété "overflowWrap" de l'objet style pour empêcher les mots longs de casser l'élément div.
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
</h2>
<div class = "container">
<p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
</div>
<script>
let longWord = document.querySelector('.long-word');
longWord.style.overflowWrap = 'break-word';
</script>
</body>
</html>
Les utilisateurs ont appris à utiliser différentes propriétés CSS pour empêcher les mots longs de casser les éléments div. Dans la première méthode, nous utilisons la propriété CSS « word-break » pour spécifier comment le navigateur doit casser les mots. Dans la deuxième approche, nous utilisons la propriété CSS "overflow-wrap" pour spécifier comment gérer le débordement du contenu de l'élément div.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress
Apr 02, 2025 am 04:27 AM
Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
