En CSS, vous pouvez utiliser l'attribut "word-wrap" pour définir un retour à la ligne automatique, avec la syntaxe "word-wrap:break-word". L'attribut word-wrap définit la méthode de retour à la ligne du contenu long. Lorsque la valeur est "break-word", le retour à la ligne automatique sera effectué à l'intérieur des mots longs ou des adresses URL.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Dans la mise en page CSS div, lorsque des lettres anglaises continues ou des chiffres consécutifs sont affichés dans une rangée dans div, p, h2, h1 et d'autres cases, ils ne seront pas automatiquement renvoyés en fonction de la limite de largeur de la case.
Bien sûr, les caractères chinois seront automatiquement enveloppés dans un DIV ou n'importe quelle boîte sans implémentation de style CSS. Seules les lettres ou les chiffres consécutifs auront le problème de ne pas être automatiquement enveloppés, donc CSS est nécessaire pour le résoudre.
Solution :
word-wrap:break-word
Explication : Lors de l'utilisation de break-word, les sauts de ligne seront forcés.
Compatible avec toutes les versions des navigateurs IE et Google Chrome.
Code HTML+CSS complet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.p{ border:1px solid #00F; height:120px; width:200px;word-wrap:break-word}
</style>
</head>
<body>
<div class="p">aabbfjdlkfldsjfldsjfldjfljdlafjldsjflkdjflkdsjfldfjdlj
<br />138787843748927493274392749327493</div>
</body>
</html>Capture d'écran de l'exemple d'effet
Recommandé apprentissage :tutoriel vidéo CSS
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
