長いテキストや画像を美しくレイアウトする！ overflow 関連プロパティの使い方

CSS MiscellaneousにおけるOverflow解説

• overflow-wrap
• text-overflow
• word-break
• word-wrap
• line-break
• hyphens

これらのプロパティは、テキストや画像などのコンテンツが要素の境界を超えた場合にどのように表示するかを調整するために使用されます。

各プロパティの詳細:

overflow-wrap

• 長い単語や文が要素の幅を超えた場合に、どのように折り返すかを制御します。
• 可能な値:
  • normal: 単語を折り返さずに次の行に移動します。
  • break-word: 長い単語を途中で折り返します。
  • anywhere: 単語を任意の位置で折り返します。

text-overflow

• テキストが要素の幅を超えた場合に、どのように表示するかを制御します。
• 可能な値:
  • clip: テキストを要素の境界内に切り取ります。
  • ellipsis: テキストの末尾に省略記号 "..." を表示します。
  • string: 省略記号ではなく、カスタム文字列を表示します。

word-break

• 可能な値:
  • break-all: 長い単語を任意の位置で分割します。
  • keep-all: 単語を分割せずに次の行に移動します。(可能な限り)

word-wrap

• 可能な値:

line-break

• 行の途中でどのように折り返すかを制御します。
• 可能な値:
  • auto: ブラウザが自動的に折り返します。
  • loose: 単語間にスペースを挿入して折り返します。
  • normal: 単語間にスペースを挿入せずに折り返します。

hyphens

• 長い単語をハイフンで分割して、次の行に移動できるようにするかを制御します。
• 可能な値:
  • none: ハイフンを使用しない。
  • auto: ブラウザが自動的にハイフンを使用する。
  • manual: ハイフンを手動で挿入する。

これらのプロパティを組み合わせることで、様々なレイアウトを実現することができます。

例:

.container {
  width: 200px;
  overflow: hidden;
}

.text {
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

このコードでは、.container要素の幅を200pxに設定し、溢れたコンテンツは隠します。.text要素内のテキストは、長い単語が途中で折り返され、末尾に省略記号 "..." が表示されます。

CSS Miscellaneousのoverflow関連プロパティのサンプルコード

長い単語を折り返す

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  This is a very long sentence that will overflow the container.
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  overflow-wrap: break-word;
}

結果:

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
This is a very long sentence
that will overflow the container.

text-overflow

テキストを省略記号で表示

<div class="container">
  <h1>This is a very long heading that will overflow the container</h1>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container h1 {
  text-overflow: ellipsis;
  white-space: nowrap;
}

結果:

This is a very long heading...

word-break

長い単語を分割する

<div class="container">
  <p>This is a very-long-hyphenated-word that will overflow the container.</p>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  word-break: break-all;
}

結果:

This is a
very-long-
hyphenated-word
that will overflow
the container.

word-wrap

長い単語を折り返す

<div class="container">
  <p>This is a very long word that will overflow the container.</p>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  word-wrap: break-word;
}

結果:

This is a very
long word that
will overflow
the container.

line-break

行の途中で折り返す

<div class="container">
  <p>This is a very long sentence that will not break 
  at the end of the line.</p>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  line-break: loose;
}

結果:

This is a very long
sentence that will not
break at the end of
the line.

hyphens

長い単語をハイフンで分割

<div class="container">
  <p>This is a very-long-hyphenated-word that will overflow the container.</p>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  hyphens: auto;
}

結果:

This is a very-
long-hyphenated-
word that will
overflow the
container.

CSS Miscellaneousのoverflow関連プロパティ以外の方法

displayプロパティ

• display: none; を使用して、要素を非表示にする。
• display: flex; を使用して、要素をフレックスレイアウトで配置する。
• display: grid; を使用して、要素をグリッドレイアウトで配置する。

positionプロパティ

• position: absolute; を使用して、要素を絶対配置にする。
• position: fixed; を使用して、要素を固定配置にする。

z-indexプロパティ

• z-index プロパティを使用して、要素の重なり順序を制御する。

メディアクエリ

• メディアクエリを使用して、画面サイズに応じて要素のスタイルを変更する。

JavaScript

• JavaScriptを使用して、コンテンツを動的に表示または非表示にする。

これらの方法は、overflow関連プロパティよりも柔軟な場合があり、より複雑なレイアウトを実現するために使用できます。

例:

displayプロパティを使用して、長いテキストを省略記号で表示

<div class="container">
  <p>This is a very long text that will overflow the container.</p>
</div>

.container {
  width: 200px;
  border: 1px solid black;
}

.container p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

結果:

This is a very long text...

positionプロパティを使用して、長い画像をスクロール可能にする

<div class="container">
  <img src="https://example.com/image.jpg" alt="Image">
</div>

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: scroll;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
}

結果:

[Image of a long image that is scrollable within the container]