CSSでのオーバーフロー非表示（オーバーフロー）例を詳しく解説-CSSチュートリアル-php.cn

WEB フロントエンド開発では、ページの美しさに影響を与える DIV でのコンテンツのオーバーフローに遭遇することがよくあります。それでは、どのようにしてオーバーフローを非表示にすればよいでしょうか? 今日は、CSS でのオーバーフローについて考えてみます。 CSSでのオーバーフロー非表示（オーバーフロー）の具体的な例をご紹介します！

overflow 属性の説明:

バージョン: CSS2 互換性: IE4+ NS6+ 継承: なし
構文:

overflow : visible | auto | hidden | scroll

ログイン後にコピー

関連パラメーターの説明は次のとおりです:

visible:: コンテンツを切り取ったり、スクロールバーを追加したりしないでください。このデフォルト値が明示的に宣言されている場合、オブジェクトは、オブジェクトを含むウィンドウまたはフレームのサイズにクリップされます。また、クリップ属性の設定は無効となります。
auto: これは body オブジェクトと textrea のデフォルト値です。必要に応じてコンテンツを切り取り、スクロールバーを追加します
hidden: オブジェクトのサイズを超えるコンテンツを表示しません。
スクロール: 常にスクロールバーを表示します。

使用方法と重要なポイント:

◎ オブジェクトのコンテンツが指定された高さと幅を超えた場合のコンテンツの管理方法を取得または設定します。
◎ textareaオブジェクトをhidden値に設定すると、スクロールバーが非表示になります。
◎ tableの場合、table-layout属性がfixedに設定されている場合、tdオブジェクトはデフォルト値のhiddenでoverflow属性をサポートします。非表示、スクロール、または自動に設定すると、td サイズを超えるコンテンツはカットされます。表示に設定すると、余分なテキストが ◎ の右または左のセルにオーバーフローします (direction プロパティの設定に応じて)。
◎ IE5以降、このプロパティはMACプラットフォームで利用可能になります。対応するスクリプト機能はオーバーフローです。

例:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

ログイン後にコピー

text-overflowバージョン: IE6+ 独自のプロパティ継承: なし

div オーバーフロー隠し div テキストのオーバーフローはドット (省略記号) に置き換えられます
div レイアウトでは、コンテンツがコンテナーからオーバーフローし、制限を超えていますコンテナによって幅が制限されている場合はどうすればよいですか?非常に混乱したので、収集して整理したところ、コンテンツがコンテナーを超える場合、超過部分に省略記号が表示されることがわかりました。このアプローチは問題を解決するだけでなく、非常に美しいものです。これ以上は言わないで、興味のある友達は参照してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"> 
<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<title>div中溢出文字用点代替的代码</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
} 
/*]]>*/ 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
</body> 
</html>

ログイン後にコピー

TD はオーバーフローして表示を非表示にすることもできます

おそらく、この記事にこのような名前を付けるとすぐに、誰かが尋ねるでしょう。なぜまだ注目しているのですかtable? それはもう古いです... 急いで Xhtml... div... ul は良いです...ol は良いです...dl は良いです...もう終わりです、他に何ができるかわかりません終わり。

テーブルは本当に時代遅れですか?表を本当に理解していますか？本当にテーブルの使い方を知っていますか？

舌戦を始めるのは私たちの仕事ではありません。時間に余裕のある人に任せてください。

本題に戻ります:

いつだったか覚えていませんが、誰かがテーブルを使用して DataGrid をシミュレートしていたとき、固定幅を超える td 内のテキストは非表示にできないのに、直接折り返されるのはなぜかと尋ねました。

はい、これは確かに次のようなケースです:

<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>

ログイン後にコピー

上記のコードを実行すると、固定幅を超えるセル内のテキストは非表示にならず、新しい行に表示されることがわかります。明らかに、これは私の本来の意図ではありません。

これはテーブルの特性のようですが、最終的には {width:*px;white-space:nowrap;overflow:hidden;} の組み合わせをサポートできません。 . うまくいかなかったので、overflow:hidden が無効になっているようです。 {注：例：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa、これに該当する場合は {white-space:nowrap} を必要としません。表示、この一連の a は 1 つの単語として認識され、改行が発生しないため、.col1 の幅を超える a は非表示になります}

[解決策 1:]

後で誰かが幅のパーセンテージを使用すると言及しましたテスト後は、最初の段落の数行のスタイルを少し変更し、その他の行は変更しないでください:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

ログイン後にコピー

変更したコードを実行すると、幅を超えるテキストが表示されることがわかります。確かに隠蔽効果が得られそうです。

実際、パーセント幅を使用すると、確かにテキスト非表示の問題を解決できますが、パーセント幅ではなく固定幅が必要な場合があるため、これが最良の解決策であるとは思えません。

このすべての根本は、セル内のテキストを折り返さずに 1 行で表示する方法です。

[解決策 2:]

この要件を達成するには、スタイルの使用に加えて、長期間使用されていないタグを強制することも考えられます。内容を1行で表示します。上記のコードに次の変更を加え、他のすべては変更しないでください:

<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
<td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
</tr>
</table>

ログイン後にコピー

做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。

　　沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。

　　既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？

最佳方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>

ログイン後にコピー

运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

总结：

本文详细介绍了CSS中溢出隐藏（overflow）的实例详解，相信下伙伴么可以进一步的了解！还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文

相关推荐：

关于溢出隐藏的详细介绍

分享文字溢出隐藏实例

溢出隐藏：最全的利用css解决内容溢出问题的几种方案

以上がCSSでのオーバーフロー非表示（オーバーフロー）例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。