複数行のテキストがオーバーフローすると省略記号が表示されます この記事では 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)
最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...
MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...
今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...
<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...
目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...
序文ダーク モードの概念は、 MacOS系統のMojaveに由来し、ユーザーが選択できる 2 つのス...
1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...
目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...
目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...
Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...
目次事前準備実施方法: 1. 単一のデータを挿入する2. マージデータ挿入3. MySqlBulkL...
1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...
.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...
ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...