Maison >interface Web >tutoriel HTML >Comment utiliser les espaces blancs pour résoudre le problème du retour à la ligne dans les listes de titres d'articles
Comment utiliser les espaces blancs pour résoudre le problème du retour à la ligne dans les listes de titres d'articles
- 巴扎黑original
- 2017-04-05 16:43:452252parcourir
Lorsque le texte est très long, qu'il s'agisse d'IE ou de Firefox, il sera automatiquement renvoyé à la ligne lorsqu'il atteint la limite. Mais dans certains cas, nous ne le souhaitons pas. Par exemple : afficher une liste de titres d'articles en utilisant la balise ul li dans une certaine zone de la page Web. Si vous ne souhaitez pas que le texte de chaque ligne soit automatiquement renvoyé à la ligne, vous pouvez utiliser l'attribut CSS white-space pour résoudre le problème. Le code suivant provient de admin10000.com
Le code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web开发者网络（www.admin10000.com）</title>
<style type="text/css">
ul#myList { margin:0px; padding:0px; list-style:none; border:1px solid #c10; width:400px; white-space:nowrap; overflow:hidden; }
p#container { width:400px; border:1px solid #ccc; padding:10px; }
</style>
</head>
<body>
<p id="container">
<ul id="myList">
<li>Admin10000.com是WEB开发者学习交流的平台，这里提供大量实用的技术文档及相关资源下载。</li>
<li>Admin10000.com是WEB开发者学习交流的平台，这里提供大量实用的技术文档及相关资源下载。</li>
<li>Admin10000.com是WEB开发者学习交流的平台，这里提供大量实用的技术文档及相关资源下载。</li>
</ul>
</p>
</body>
</html>
Conseils :
1. Définissez l'attribut CSS white-space:nowrap; pour la balise ul afin que le texte dans li ne soit pas renvoyé à la ligne.
2. Définissez l'attribut CSS overflow:hidden pour la balise ul afin de masquer la partie au-delà de la largeur spécifiée
3. La largeur de ul doit être explicitement spécifiée dans IE6. Sinon, ul est étiré jusqu'à ce que tout le contenu soit affiché. Nous ajoutons donc l'attribut width:400px.
Voici donc la suggestion : width:400px; white-space:nowrap; overflow:hidden;
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!