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)

推薦する

Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト

最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...

IE アドレスバーのアイコン表示問題を解決する 3 つの手順

<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...

TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。

目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...

ウェブサイトにダークモード切り替え機能を持たせるための純粋なCSSフリー実装コード

序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

Linux は、Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決します

Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

.Net Core を使用して数千万のデータを MySQL にインポートする手順

目次事前準備実施方法: 1. 単一のデータを挿入する2. マージデータ挿入3. MySqlBulkL...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...