So verwenden Sie Leerzeichen, um das Problem des Zeilenumbruchs in Artikeltitellisten zu lösen-HTML-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-04-05 16:43:45

Original

1936 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!