【CSS】ブロック内で文字列を折り返す

f:id:fclout:20200429113952p:plain

こんな風にブログサイトの中で、各記事のダイジェストを作ろうとしていたらタイトルが横にはみ出してしまった。
なんとか写真の幅で折り返したい。
ちなみにダイジェスト部分はトップ画、投稿日、タイトル、記事ダイジェストの4要素をGrid Layoutで縦に並べたもの。

タイトルだけではなく記事ダイジェストも折り返したいので、grid要素に対してword-breakを指定する。

.digestblock {
    display: grid;
    webkit-grid-row-gap: 2px;
    grid-row-gap: 2px;
    webkit-grid-template-columns: 40% 30% 30%;
    grid-template-columns: 40% 30% 30%;
    padding: 10px;
    webkit-grid-template-rows: 50% 18px 10% 1fr;
    grid-template-rows: 50% 18px 10% 1fr;
    word-break: break-word;  #これ
}


するとdigestblock内のすべての要素内の文章が要素の幅で折り返される。

f:id:fclout:20200429114828p:plain

まだいろいろと汚いがちょっとは見やすくなった・・・かな。