レスポンシブ Web サイトの CSS で文字数制限を作成するにはどうすればよいですか?

レスポンシブ Web サイトの CSS での文字数制限の作成

レスポンシブ Web サイトをデザインする場合、テキストの長さの制御は非常に重要です。大きな画面でテキストがオーバーフローしないように、文の長さを特定の文字数に制限する必要がある場合があります。

これを実現するには、CSS の max-width を使用して「truncate」メソッドを使用できます。およびオーバーフロー省略記号プロパティ。この手法では、テキストの最大幅を設定し、テキストが切り詰められていることを示す省略記号 (...) を追加します。

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75ch; /* Adjust to desired character limit */
}

例:

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

この技術により、レイアウトを乱すことなく、さまざまな画面サイズで指定された文字数制限内でテキストが折り返されることが保証されます。

以上がレスポンシブ Web サイトの CSS で文字数制限を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。