CSS3でタグの余分な部分を省略記号に設定する方法

方法: 1. "overflow:hidden;" スタイルを使用して、非表示を超えてラベル テキストを設定します。 2. "display: block;" を使用して、ラベルをブロック レベルの要素に設定します。 3. . 「text-overflow :ellipsis;」を使う aタグの余分な部分のスタイルを省略記号に設定するだけです。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 でタグの余分な部分を省略記号に設定する方法

text-overflow 属性は、テキストがテキストを含む要素からオーバーフローした場合にテキストを表示する方法を指定します。オーバーフローの後、テキストを切り取ったり、省略記号 (...) を表示したり、カスタム文字列を表示したりするように設定できます (すべてのブラウザーでサポートされているわけではありません)。

text-overflow: clip|ellipsis|string|initial|inherit;

クリップ テキストを切り取ります。

ellipsis トリミングされたテキストを表す省略記号を表示します。

例は次のとおりです。

タグ テキストには、省略記号を表示するための固定長とスタイルが指定されています。

css:

 .cont {
            width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            float: left;
        }

html:

<a class="cont">这是一个名称很长的文档吧要测试超出功能</a>

表示効果は図に示すとおりです:

(学習ビデオ共有: css ビデオ チュートリアル )

以上がCSS3でタグの余分な部分を省略記号に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。