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

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)

推薦する

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

docker ログが取得できない問題の解決方法

毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

Echart Bar の 2 列チャート スタイルの最も完全な詳細な説明

目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

CSS を使用して 3 列レイアウトを実装するサンプル コード。中央の列は適応型で、テキスト サイズに応じて幅が変わります。

Baiduのインタビューで遭遇する質問は、次のレイアウト効果を達成する必要がある。 中央の紫色の列...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...

MySQL 8.0.20 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...

MySQL thread_stack 接続スレッドの最適化

MySQL は、ネットワーク経由だけでなく、名前付きパイプ経由でも接続できます。MySQL への接続...

VMware 15.5 バージョンのインストール Windows_Server_2008_R2 システム チュートリアル図

1. VMware 15.5から新しい仮想マシンを作成する1. VMware を開き、ホームページで...

Tomcat を IDEA にダウンロード、インストール、デプロイするチュートリアル (IDEA の 2 つのホット デプロイ設定方法付き)

目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...

UTF-8 および GB2312 ウェブエンコーディング

最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...

MySQL における 8 つの一般的な SQL 使用例

序文MySQL は、2016 年もデータベースの人気において力強い成長傾向を維持し続けました。 My...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...