テキストオーバーフローを使用してハイフネーションを防ぐ方法
P粉464208937
2023-09-03 15:00:49
<p>一部のタイトルに最大行数を設定しようとしていますが、問題は、行がハイフンで終わる場合があることです。私が必要とするのは、単語を分割する必要がある場合、その単語を完全に非表示にし、省略記号を前の単語の後に配置する必要があることです。 </p>
<p>このコードは問題を示しています: </p>
<p>
<pre class="brush:css;toolbar:false;">#head {
幅:300ピクセル;
フォントサイズ: 20px;
表示: -webkit-box !重要;
色: #000000 !重要;
テキストオーバーフロー: 省略記号 !重要;
-webkit-line-clamp: 4 !重要;
-webkit-box-orient: 垂直方向 !重要;
オーバーフロー: 非表示!重要;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<div id="ヘッド">
Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして作成した 1500 年代以来、業界の標準ダミー テキストです。
</div>
</html></pre>
</p>
<p>「ever」という単語に切れ目があるのですが、どうにかしてこれを防ぐことはできますか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
単語区切りを完全に非表示にし、前の単語の後に省略記号を配置する効果を実現するには、JavaScript を使用してテキスト コンテンツを操作します。これを実現するためにコードを変更する方法の例を次に示します:
このコードでは、JavaScript 関数
truncateTextを使用して、指定された最大長を超えたテキスト コンテンツを切り捨てます。この関数は、最大長内の最後のスペース文字を検索し、残りのテキストを省略記号に置き換えます。省略記号を追加する前に、
maxLengthパラメータを希望の文字数に調整できます。