CSSはテキストが長すぎる場合の省略記号表示を実装します

angryTom
リリース: 2020-02-25 18:12:10
転載
3105 人が閲覧しました

この記事では、文字が長すぎるときに省略記号を表示する CSS の方法を紹介します。一定の参考になるので、CSS を学習している友人の参考になれば幸いです。

CSSはテキストが長すぎる場合の省略記号表示を実装します

1. CSS スタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. 一般的なスタイル

一般的な CSS スタイル、幅が十分でない場合、改行効果が発生する可能性があります。この効果はある時点で確実に機能しなくなるため、CSS スタイルを変更してこの問題を解決できます。


    
        
        text-overflow
        
        
        
        
    

未使用 clip 自适应宽度

未使用 ellipsis 自适应宽度

ログイン後にコピー

左側の幅が狭くなり、文字が折り返されます。

(推奨学習: CSS チュートリアル )

右側の幅が小さくなり、テキストが折り返されます。

2. テキストが長すぎる場合は、省略記号が表示されるか、インターセプトの効果が表示されます。

【通常写法:】【说明:】
    text-overflow:表示当文本溢出时是否显示省略标记,ellipsis表示省略号效果,clip 表示截取的效果。
    overflow:hidden;  将文本溢出的内容隐藏。
    white-space:nowrap;  是禁止文字换行。
    width:  (可选)可以写固定值,也可以根据宽度自适应显示效果。
ログイン後にコピー

    
        
        text-overflow
        
        
        
        
    

text-overflow : clip

不显示省略标记,而是简单的裁切条


text-overflow : ellipsis

当对象内文本溢出时显示省略标记


自定义宽度,根据宽度自适应大小

使用 clip 自适应宽度

使用 ellipsis 自适应宽度

ログイン後にコピー

clip で効果が表示されます。トリミングの効果を表示し、省略記号を使用すると省略記号の効果が表示されます。

PHP 中国語 Web サイトには、多数の プログラミング チュートリアル があり、学習へようこそ!

以上がCSSはテキストが長すぎる場合の省略記号表示を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!