くまだどうも、くまだです。
半角英数字系のテキストの折り返し対策。word-breakプロパティを使う。
半角英数字テキストの折り返しword-break
word-breakプロパティは文章の改行の仕方を変更したいときに使います。なので、半角英数字のときに使うというのは厳密には違います。
例えば以下のようなケース。
<ul class="p-cards">
<li class="p-cards__item p-card" >
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="p-card___text">タイトルタイトル</p>
</li>
<li class="p-cards__item p-card" >
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="p-card___text">タイトルタイトル</p>
</li>
<li class="p-cards__item p-card" >
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="p-card___text">タイトルタイトル</p>
</li>
<li class="p-cards__item p-card" >
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<p class="p-card___text">タイトル</p>
</li>
</ul>
.p-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
margin-top: 80px;
max-width: 80%;
margin-right: auto;
margin-left: auto;
}
.p-card {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.p-card__img {
width: 100%;
display: block;
}
.p-card img {
width: 100%;
height: 100%;
display: block;
}
.p-card___text {
flex-grow: 1;
}
.p-card__link-wrap {
margin-top: 10px;
}
.p-card__link {
padding: 8px;
display: inline-block;
background: yellow;
}
よくあるカード型の配置のものですが、こちらの見出しに半角英数字を適用すると、
レイアウトが崩れます。例えばカードにmax-widthを指定すると、半角英数字テキストは折り返さずに表示されてしまいます。
これは例えば、bodyタグ（カードでもいい）にword-breakプロパティ指定で改行できます。
body {
word-break: break-all;
}
半角英数字テキストでも改行されます。
word-breakプロパティは、以下の値が使えます。
- normal：デフォルト
- beak-all：CJK以外のテキストで単語中の文字改行禁則処理を解除。どの文字間でも改行する
- keep-all：CJKテキストの改行を許可しない。
break-allは便利ですが、単語の途中の括弧で折り返したり、句読点が文の頭にくるケースも考えられるので、注意しましょう。
ここまで読んでくださりありがとうございました。