☰

CSSで最大文字数を設定する 質問する

tag-icon • tag-icon html css text
CSSで最大文字数を設定する 質問する

私は学校用のレスポンシブなウェブサイトを作成していますが、質問は次のとおりです。

非常に大きな画面を使用している場合に、Web サイトの文章の最大文字数 (CSS を使用) を 75 文字などに設定して、文章が 75 文字を超えないようにするにはどうすればよいですか。

最大幅を試してみましたが、レイアウトが台無しになってしまいました。レスポンシブにするためにフレックスボックスとメディアクエリを使用しています。

ベストアンサー1

次のようにしmax-widthてオーバーフローを設定することで、切り捨てメソッドを常に使用できます。ellipsis

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

例：

.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>

複数行の切り捨てについては、flexソリューションを参照してください。3 行を切り捨てる例です。

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

例：

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!</p>

おすすめ記事