CSSのword-breakプロパティを使った文章の改行の仕方を現役エンジニアが解説【初心者向け】

初心者向けにCSSのword-breakプロパティを使った文章の改行の仕方について解説しています。word-breakプロパティを使うと、テキストの改行に関する規則を指定することができます。使い方と利用例を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

CSSのword-breakプロパティを使った文章の改行の仕方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

word-breakプロパティを使った文章の改行の仕方について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

word-breakプロパティとは

word-breakプロパティとは、要素からテキストがはみ出る場合の改行方法を制御するものです。word-breakプロパティの指定方法は以下のとおりです。

word-break: キーワード

キーワードには以下の種類があります。

  • normal:既定値です。既定の改行規則を適用します
  • break-all:要素の幅に合わせて単語の途中であっても改行します
  • keep-all:CJK(中国語、台湾語、日本語、韓国語)の改行を許可しません

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

活用場面

日本語の場合、単語の途中で改行してもそれほど違和感はありません。

こんにちは!今日はとても良い天
気で青空ですね!

しかし英語などの場合、単語の途中で区切ってしまうと意味が通じなくなってしまいます。

Hello! It's very nice wea
ther and blue skies today!

このように文章を適切に表示させるためにword-breakプロパティは利用されています。

 

ブラウザによる対応の違い

word-breakプロパティは全てのブラウザで対応しています。詳しくは以下の記事も参考にしてください。

MDN – word-break

 

word-breakを使って文章を記述してみよう

今回のサンプルプログラムではword-breakを使った文章の改行方法について確認します。なお、文章は青空文庫から夏目漱石の吾輩は猫であるを使用しています。英語翻訳はDeepL翻訳を使用しています。

青空文庫 – 吾輩は猫である

DeepL

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
  <style>
    div {
      width: 500px;
    }
    .jp {
      word-break: break-all;
    }
    .en {
      word-break: normal;
    }
  </style>
</head>
<body>
  <div class="jp">
  吾輩わがはいは猫である。名前はまだ無い。<br>
  どこで生れたかとんと見当けんとうがつかぬ。<br>
  何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>
  吾輩はここで始めて人間というものを見た。<br>
  しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。
  </div>
  <br>
  <div class="en">
  I am a cat. No name yet.<br>
  I have no idea where I was born.<br>
  All I remember is meowing and crying in the dimly lit, dull place.<br>
  This is the first time I have seen what human beings are.<br>
  What's more, I was told later that it was a shosei, the most vicious and vicious race of humans.
  </div>
</body>
</html>

実行結果は以下のとおりです。word-breakの設定を変えて試してみましょう。

 

まとめ

今回の記事ではCSSのword-breakプロパティを使った文章の改行の仕方について学習しました。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門(技術評論社)」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。