How to use white-space to solve the problem of line wrapping in article title lists-HTML Tutorial-php.cn

How to use white-space to solve the problem of line wrapping in article title lists

巴扎黑

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

Original

2230 people have browsed it

When the text is very long, whether it is IE or Firefox, it will automatically wrap when it reaches the boundary. But in some cases, we don't want this. For example: display a list of article titles using the ul li tag in a certain area of the web page. If you don’t want the text in each line to wrap automatically, you can use the css attribute white-space to solve the problem. The following code comes from admin10000.com

The code is as follows:

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

Copy after login

hint:

1. Set the CSS property white-space:nowrap; for the ul tag so that the text in li does not wrap.

2. Set the CSS attribute overflow:hidden for the ul tag to hide the part beyond the specified width

3. The width of ul must be explicitly specified in IE6. Otherwise ul is stretched until all content is displayed. So we add the attribute width:400px.

So here are the suggestions: width:400px; white-space:nowrap; overflow:hidden;

The above is the detailed content of How to use white-space to solve the problem of line wrapping in article title lists. For more information, please follow other related articles on the PHP Chinese website!