CSSの複数行テキストがはみ出した場合に表示される省略記号について

この記事では、CSS の複数行のテキストがオーバーフローした場合に表示される省略記号の例に関する関連情報を主に紹介します。内容が非常に優れているので、参考として共有します。

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

この記事では 2 つの方法をお勧めします。

1. css

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

.box {
    overflow: hidden; /* 溢出时不显示溢出的内容 */
    text-overflow: ellipsis; /* 发生溢出时使用省略号代替 */
    display: -webkit-box; /* chrome浏览器的私有属性。显示为box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 显示多少行 */
}

拡張子

ワードラップ

キーワード	説明	デフォルト値	値
ワード-w rap	ワードラップの条件を指定します	通常、単語のハイフネーション位置で改行します。	改行、単語内の行を改行します。
overflow-wrap、css3でword-wrapからoverflow-wrapに変更されました

text-overflow

デフォルト値値test-overflowボックスの外側のテキストがどのように表示されるかクリップ、テキストをトリミングします。省略記号、省略記号を表示します。文字列、指定されたテキストを表示します。

キーワード	説明

空白

キーワード説明デフォルト値値空白空白の扱い方と行を折り返すかどうか通常、空白ブラウザは無視します。 事前に、空白のままにしておきます。 nowrap、テキストは折り返されません。事前にラップし、空白のままにして、通常どおりラップします。行前、空白をマージし、改行を保持します。 box-orient

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

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

Chrome コアを搭載したブラウザのみが独自のプライベート属性をサポートします。

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

2. js

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

ellipsis.js

NameLinkellipsis Linkhttps://www.jsdelivr.com/package/npm/ellipsis。 js ellipsishttps://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.jsellipsis githttps://github.com/glinford/ellipsis . js

の使い方。

1. スクリプトファイルを導入します

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2.

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

Extend

を使用します。構成されていない場合は、デフォルト値が使用されます。

{
    ellipsis: '...', // 默认显示的替代文本
    debounce: 0, // 延迟多长时间后执行
    responsive: true, // 是否有窗口大小改变时执行
    className: '.clamp', // 默认操作具有这个类的元素。
    lines: 2, // 默认只出现2行元素。
    portrait: null, // 默认不改变，如果你想要在竖屏模式下有不同的行数，
    break_word: true // 默认截断单词。
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS での不等号記号の使用と CSS の継承メソッドについて

以上がCSSの複数行テキストがはみ出した場合に表示される省略記号についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。