CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されます

この記事では 2 つの方法を推奨します。

1. CSS

ヒント: Chrome ブラウザのみと互換性があります。 ffはサポートされていません。

。箱 {
    overflow: hidden; /* オーバーフローが発生した場合、オーバーフローコンテンツは表示されません*/
    text-overflow: ellipsis; /* オーバーフローが発生した場合は、代わりに省略記号を使用します*/
    display: -webkit-box; /* Chrome ブラウザのプライベート プロパティ。ボックスとして表示されます。 */
    -webkit-box-orient: vertical; /* 要素を垂直に配置する */
    -webkit-line-clamp: 2; /* 表示する行数 */
}

拡大

ワードラップ

キーワード	説明する	デフォルト値	価値
ワードラップ	単語の折り返しの条件を指定します	通常、単語のハイフネーションポイントで折り返します。	break-word、単語内で区切る。
overflow-wrap、CSS3 で word-wrap から overflow-wrap に変更されました

テキストオーバーフロー

キーワード	説明する	デフォルト値	価値
テストオーバーフロー	ボックスの外側にテキストを表示する方法		テキストをクリップ、トリムします。省略記号、省略記号を表示します。文字列、指定されたテキストを表示します。

空白

キーワード	説明する	デフォルト値	価値
空白	空白の扱い方と行の折り返しの有無	通常、空白はブラウザによって無視されます。	pre、空白のままにします。 nowrap、テキストは折り返されません。事前に折り返し、空白を保持し、通常どおり折り返します。行頭文字を省略し、空白を折りたたみ、改行を保持します。

ボックス方向

このプロパティはまだブラウザでサポートされていません。各ブラウザのプライベートプロパティを使用する必要があります。

キーワード	説明する	デフォルト値	価値
ボックス指向	子要素を並べ替える方法	inline-axis、インライン座標軸に沿った子要素（水平方向にマッピング）。	水平方向は、子要素が左から右に水平方向に配置されることを指定します。 vertical は、子要素を上から下に垂直に配置します。 block-axis では、子要素はブロック軸に沿って配置されます (垂直にマッピングされます)。継承、親要素を継承します。

ラインクランプ

Chrome ベースのブラウザのみが独自のプライベートプロパティをサポートします。

表示するブロックレベル要素の行数。

2.js

js を使用してオーバーフローテキストの表示方法を制御する方法は多数あります。推奨されるスクリプトファイルは次のとおりです: ellipsis.js

省略記号.js

名前	リンク
省略記号リンク	https://www.jsdelivr.com/package/npm/ellipsis.js
省略記号	https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js
省略記号 git	https://github.com/glinford/ellipsis.js

方向：

1. スクリプトファイルをインポートする

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ellipsis.js"></script>

2. 使用

var ell = 省略記号({
    行数: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

拡大

いくつかの設定項目もあります。設定されていない場合はデフォルト値が使用されます。

{
    ellipsis: '...', // 表示するデフォルトの代替テキスト debounce: 0, // 実行前の遅延 responsive: true, // ウィンドウのサイズが変更されたときに実行するかどうか className: '.clamp', // デフォルトのアクションは、このクラスの要素に対して実行されます。
    lines: 2, // デフォルトでは 2 行の要素のみが表示されます。
    Portrait: null, // デフォルトでは変更なし。ポートレートモードで異なる行数にしたい場合は、
    break_word: true // デフォルトで単語を分割します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL 8.0.23 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

>>: HTML チュートリアル: よく使われる HTML タグのコレクション (6)