複数行のテキストがオーバーフローすると省略記号が表示されます この記事では 2 つの方法を推奨します。 1. CSS ヒント: Chrome ブラウザのみと互換性があります。 ffはサポートされていません。 。箱 { overflow: hidden; /* オーバーフローが発生した場合、オーバーフローコンテンツは表示されません*/ text-overflow: ellipsis; /* オーバーフローが発生した場合は、代わりに省略記号を使用します*/ display: -webkit-box; /* Chrome ブラウザのプライベート プロパティ。ボックスとして表示されます。 */ -webkit-box-orient: vertical; /* 要素を垂直に配置する */ -webkit-line-clamp: 2; /* 表示する行数 */ } 拡大 ワードラップ
テキストオーバーフロー
空白
ボックス方向 このプロパティはまだブラウザでサポートされていません。各ブラウザのプライベートプロパティを使用する必要があります。
ラインクランプ Chrome ベースのブラウザのみが独自のプライベート プロパティをサポートします。 表示するブロックレベル要素の行数。 2.js js を使用してオーバーフロー テキストの表示方法を制御する方法は多数あります。推奨されるスクリプトファイルは次のとおりです: ellipsis.js 省略記号.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 を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...
毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...
html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...
目次序文インストールと設定1. Echartsをインストールする2. Echartsをグローバルに導...
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
Baiduのインタビューで遭遇する質問は、次のレイアウト効果を達成する必要がある。 中央の紫色の列...
1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...
この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...
MySQL は、ネットワーク経由だけでなく、名前付きパイプ経由でも接続できます。MySQL への接続...
1. VMware 15.5から新しい仮想マシンを作成する1. VMware を開き、ホームページで...
目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...
最近、多くの学生から Web ページのエンコーディングについて質問を受けています。gb2312 と ...
序文MySQL は、2016 年もデータベースの人気において力強い成長傾向を維持し続けました。 My...
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...