ホワイトスペースを使用して記事タイトルリストの行折り返しの問題を解決する方法-htmlチュートリアル-php.cn

ホワイトスペースを使用して記事タイトルリストの行折り返しの問題を解決する方法

巴扎黑

リリース： 2017-04-05 16:43:45

オリジナル

2220 人が閲覧しました

IEでもFirefoxでもテキストが非常に長い場合、境界に達すると自動的に折り返されます。しかし、場合によっては、これを望まないこともあります。例: Web ページの特定の領域に ul li タグを使用して記事タイトルのリストを表示します。各行のテキストを自動的に折り返したくない場合は、CSS 属性の空白を使用して問題を解決できます。次のコードは admin10000.com からのものです

コードは次のとおりです:

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

ログイン後にコピー

ヒント:

1. li 内のテキストが折り返されないように、ul タグの CSS 属性white-space:nowrap;を設定します。

2. ulタグにCSS属性overflow:hiddenを設定して、指定幅を超えた部分を非表示にします

3. IE6 では ul の幅を明示的に指定する必要があります。それ以外の場合、ul はすべてのコンテンツが表示されるまで引き伸ばされます。そこで、属性 width:400px を追加します。

そこで提案があります: width:400px; overflow:hidden;

以上がホワイトスペースを使用して記事タイトルリストの行折り返しの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。