CSSベース:text-overflow:ellipsisオーバーフローテキスト

4739 ワード

html css

text-overflowは比較的非凡な属性であり、CSSマニュアルでは、この属性はこのように定義されています.
構文:
　　text-overflow : clip | ellipsis
パラメータ:
clip:省略フラグは表示されません(...)、簡単な裁断です
(clipというパラメータはあまり使われません!)
Ellipsis:オブジェクト内のテキストがオーバーフローしたときに省略フラグが表示されます(...)
説明:
省略タグを使用するかどうかを設定または取得します(...)オブジェクト内のテキストのオーバーフローを示します.
text-overflow:ellipsisプロパティはFFでは効果がありません.
例:
　　div { text-overflow : clip; }
text-overflowは比較的非凡なスタイルであり、通常使用されているタイトルカット関数の代わりに使用することができ、タイトルファイルには50の漢字があり、リストには300 pxの幅しかない可能性があります.見出しで関数を切り取ると、見出しは完全ではありません.CSSスタイルtext-overflow:ellipsisを使用すると、出力される見出しは完全ですが、コンテナサイズの制限で表示されません.
text-overflowプロパティの適用方法については、次のように説明します.
text-overflowプロパティは注記のみで、テキストがオーバーフローしたときに省略マークが表示されるかどうか.他のスタイル属性定義はありません.オーバーフロー時に省略記号を生成する効果を実現したい.また、テキストの行内表示(white-space:nowrap)とオーバーフローコンテンツの非表示(overflow:hidden)を強制することも定義する必要があります.このようにしてこそ、オーバーフローテキストに省略記号を表示する効果が得られます.
私達のトップページは1つの無秩序なリストULを創立して、中にいくつかのリスト項目LIがあって、内部はリストリンクAを創立しました.私たちのテストは主にLIで行われています.観察を重視してください.次の3つのコードを見てください.
一、text-overflow:ellipsisのみを定義する.省略記号効果は実現できません.

<!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=gb2312" />
<title>MB5U</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li>CSS     - Pro CSS Techniques 
<li>CSS  ：id     class             
<li>CSS    ：CSS          
<li>Web  ：                         
<li>  IE7        A         ！
<li>CSS    td       1px      
</ul>
<a href="/tz.php?url=www.mb5u.com/" title="" style="display:block; text-align:center; color:#c00;">MB5U.com  ，        。 	
</body>
</html>

二、text-overflow:ellipsisを定義する.white-space:nowrap; 同様に省略記号効果は実現できません.

<!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=gb2312" />
<title>MB5U</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li>CSS     - Pro CSS Techniques 
<li>CSS  ：id     class             
<li>CSS    ：CSS          
<li>Web  ：                         
<li>  IE7        A         ！
<li>CSS    td       1px      
</ul>
<a href="/tz.php?url=www.mb5u.com/" title="" style="display:block; text-align:center; color:#c00;">MB5U.com  ，        。 	
</body>
</html>

三、同時に適用:text-overflow:ellipsis;white-space:nowrap; overflow:hidden; 必要なオーバーフローテキスト表示省略記号の効果を実現しました.

<!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=gb2312" />
<title>MB5U</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li>CSS     - Pro CSS Techniques 
<li>CSS  ：id     class             
<li>CSS    ：CSS          
<li>Web  ：                         
<li>  IE7        A         ！
<li>CSS    td       1px      
</ul>
<a href="/tz.php?url=www.mb5u.com/" title="" style="display:block; text-align:center; color:#c00;">MB5U.com  ，        。 	
</body>
</html>

asp.NetWebService非同期

asp.Netカスタムページングコントロールの例