So verwenden Sie Leerzeichen, um das Problem des Zeilenumbruchs in Artikeltitellisten zu lösen

巴扎黑
Freigeben: 2017-04-05 16:43:45
Original
2225 Leute haben es durchsucht

Wenn der Text sehr lang ist, egal ob IE oder Firefox, wird er automatisch umbrochen, wenn er die Grenze erreicht. Aber in manchen Fällen wollen wir das nicht. Beispiel: Zeigen Sie eine Liste von Artikeltiteln mithilfe des ul li-Tags in einem bestimmten Bereich der Webseite an. Wenn Sie nicht möchten, dass der Text in jeder Zeile automatisch umgebrochen wird, können Sie das Problem mit dem CSS-Attribut „white-space“ lösen. Der folgende Code stammt von admin10000.com

Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Tipp:

1. Legen Sie das CSS-Attribut „white-space:nowrap;“ für das ul-Tag fest, damit der Text in li nicht umbrochen wird.

2. Legen Sie das CSS-Attribut overflow:hidden für das ul-Tag fest, um den Teil über die angegebene Breite

hinaus auszublenden 3. Die Breite von ul muss in IE6 explizit angegeben werden. Andernfalls wird ul gestreckt, bis der gesamte Inhalt angezeigt wird. Also fügen wir das Attribut width:400px hinzu.

Hier ist also der Vorschlag: width:400px;white-space:nowrap;overflow:hidden;

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Leerzeichen, um das Problem des Zeilenumbruchs in Artikeltitellisten zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage