ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS は、指定された幅を超えるテキストを制御して、省略記号とテキストをラッピングせずに表示します_html/css_WEB-ITnose

CSS は、指定された幅を超えるテキストを制御して、省略記号とテキストをラッピングせずに表示します_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:18:54
オリジナル
1447 人が閲覧しました

一般的なテキストの切り捨て (インラインとブロックに適用):

.text-overflow {    display:block;/*内联对象需加 */    width:31em;/* 何问起 hovertree.com */    word-break:keep-all;/* 不换行 */    white-space:nowrap;/* 不换行 */    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/}
ログイン後にコピー

テーブルテキストオーバーフローの定義:

範囲外のテーブルには省略記号を表示

 1 table{ 2     width:30em; 3     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ 4 } 5 /* 6 何问起 7 hovertree.com 8 */ 9 td{10     width:100%;11     word-break:keep-all;/* 不换行 */12     white-space:nowrap;/* 不换行 */13     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */14     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/15 }
ログイン後にコピー

注意する必要があるのは、この CSS です。 style 単一行のテキストでのみ機能します。複数行で使用する場合は、最初の行のみが機能します。 この書き方で「…」が表示されるのはIEだけです

他のブラウザでは指定した幅を超えると文字が非表示になります。

特殊効果:

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート