テキストがコンテンツ領域からはみ出る

paddingをつけても余白の役割を果たさず、dtとddのテキストが重なる問題が発生しています。テキストはいつでもコンテンツ領域に収まってくれるものだと思っていたのですが、どのような条件でコンテンツ領域を超えてしまうのでしょうか。

実現したいこと

dtとddのテキストの間に適切な余白をつけ、幅を変えてもdtとddのテキストが重ならないようにしたい
コンテンツがコンテンツ領域をはみ出してしまう条件を教えてほしい

該当のソースコード

HTML
1<div class="news">
2       <dl>
3         <dt>2020.XX.XX</dt>
4         <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました</dd>
5         <dt>2020.XX.XX</dt>
6         <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
7         <dt>2019.XX.XX</dt>
8         <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
9         <dt>2019.XX.XX</dt>
10         <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
11         <dt>2019.XX.XX</dt>
12         <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
13       </dl>
14      </div><!-- /news -->

CSS
1/* news */
2.news dl {
3  display: flex;
4  flex-wrap: wrap;
5  width: 100%;
6}
7
8.news dt {
9  width: 21%;
10  padding-left: 10px;
11  box-sizing: border-box;
12}
13
14.news dd {
15  width: 79%;
16  margin: 0;
17}
18
19.news dt,dd {
20  border-top: 1px solid rgb(157, 157, 157);
21  padding-top: 15px;
22  padding-bottom: 15px;
23  font-size: 14px;
24  box-sizing: border-box;
25}
26
27:is(dt,dd):last-of-type {
28  border-bottom: 1px solid rgb(157, 157, 157)
29}
30
31@media(max-width: 768px) {
32  .news dl {
33    padding: 0 10px;
34    box-sizing: border-box;
35  }
36
37  .news dt,dd {
38    font-size: 12px;
39  }
40
41  .news dt {
42    padding-right: 20px;
43  }
44}
45

試したこと

同様の問題及び解決策が記載されているサイトを見つけることはできませんでした。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

行動規範の内容に同意します

回答1件

ベストアンサー

dtとddのテキストの間に適切な余白をつけ、幅を変えてもdtとddのテキストが重ならないようにしたい

.news dt { word-break: break-all } を追加してください。

コンテンツがコンテンツ領域をはみ出してしまう条件を教えてほしい

基本的にはテキストはボックス内で折り返しますが、「一つの英単語」と認識されるような文字列は折り返しません。アルファベットがドット区切りで繋がっている文字列も「一つの英単語」と認識されるようです。典型的には URL 文字列などもスラッシュを除いて折り返されません。

こうした「一つの英単語」と認識されるような文字列を折り返すには word-break: break-all を指定します。似たプロパティ指定に overflow-wrap: break-word; がありますが、overflow-wrap プロパティの場合は単語区切りでできる限り折り返します。一方 word-break プロパティの場合は単語の途中だろうと強制的に折り返します。

ところで、私なら提示されたソースコードによって表現されるデザインは display: flex を使わずに display: table で組みます。