Maison > Article > interface Web > Comment puis-je empêcher des mots longs de briser mon div ?
Comment puis-je empêcher des mots longs de briser mon div ?
- WBOYavant
- 2023-08-30 16:29:06697parcourir
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> 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!