ホームページ >ウェブフロントエンド >htmlチュートリアル >ホワイトスペースを使用して記事タイトルリストの行折り返しの問題を解決する方法
ホワイトスペースを使用して記事タイトルリストの行折り返しの問題を解決する方法
- 巴扎黑オリジナル
- 2017-04-05 16:43:452253ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。