神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

記事のタイトルが変な場所で折り返されてしまう「CSSのword-break: keep-all」で対応可能

見難い記事タイトルのパターン

例えばこれ、CSSのword-break: keep-allが設定されていないテーマだと、こうなります。

f:id:tommyoctopas:20190801114415j:plain

 

見やすくなったよ!Good Job!!

word-break: keep-allを設定すると日本語の単語を理解してくれ「こう折り返したら見やすいんじゃね!」って、うまいことやってくれます。

f:id:tommyoctopas:20190801114402j:plain

こういった機能はある意味、AIと呼んでいいのかもしれません。超賢いです。

ちなみに僕のテーマは記事タイトルをセンタリングさせてます。なので、この設定を入れると、タイトルのデザインがドラマチックに演出されます。

 

デザイン設定のCSSに以下のコードをセットします。

.entry-title {
    word-break: keep-all;
}

これだけ、簡単でしょ

特に長~いタイトルの記事が多い人は、設定した方が格段に見やすくなります。