CSS でテキスト オーバーフローの省略記号を実装する 4 つの方法 (コード付き)

この記事の内容は CSS でテキストのオーバーフロー省略記号を実現する 4 つの方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

プロジェクトでは、特定の行または特定の行数の後に省略記号を追加する必要があります。 -webkit-line-clamp および -webkit-box- を使用します。 orient 属性が使用されます。webpack の package-webkit-box-orient 属性が無視される場合があります。これは、テキスト省略記号の 1 行の実装です。

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

2. Webpack を使用する場合、テキスト省略記号を実装する行

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;

パッケージ化ツールでは、この -webkit-box- は無視されます。Orient 属性を次の記述方法に変更するだけです。

display: -webkit-box; 
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;

3.js を使用して、番号の後に省略記号を追加します。ワード数

if (title.length > 26) {
  title = title.substring(0, 27) + "...";
}

4. ワードブレイクとワードラップ

white-space:normal (自動行折り返し)、書き込まれたテキストが定義された幅を超える場合は自動的に折り返されますが、書き込まれたデータがスペースを含まない文字または数字の集まりでコンテナの幅を超える場合、コンテナは改行されずに展開されます。

#word -break:break-all;word-wrap:break-word を使用すると、
word-break:break-all を解決できます。コンテナの幅を超えると、単語が非常に長い場合、単語を切り詰めて個別に書き込みます
word-wrap:break-word コンテナの幅を超えると、単語が非常に長い場合、その単語は単語の代わりに次の行に配置されます。 ##normal: 単語内での改行を許可します。
• break-all: 単語内での改行を許可します

  keep-all : 半角スペースまたはハイフンでのみ改行します。

word-wrap : Normal | Break-word
• normal : コンテンツが指定されたコンテナーの境界を越えることを許可します

  break-word : コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも発生します

以上がCSS でテキスト オーバーフローの省略記号を実装する 4 つの方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。