やりたいこと
- 紙デザインのようにテキストボックスの右端のラインをきれいに揃えたい
- 変なところで改行されないように禁則処理も施したい
- 領域をはみ出す連続記号や長い文字列に対する改行処理対策
結論
CSS
text-align: justify;
text-justify: inter-ideograph; /* Edge */
line-break: strict;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
プロパティの解説
text-align: justify;
text-align プロパティで水平方向の配置を両端揃え（均等割り付け）にします。
text-justify: inter-ideograph;
IE・Edgeでは、text-align プロパティに値「justify」を指定しただけでは両端揃えになりません。
英語のような「単語が空白文字で区切られる言語」であれば両端揃えになります。
しかし、日本語のような「単語が空白文字では区切られない言語」は両端揃えになりません。
日本語文字だけしかない行も含めて両端揃えにするには、text-justify プロパティを併記する必要があります。
line-break: strict;
line-break プロパティで句読点や記号を用いた場合の禁則処理を設定します。
word-break: break-word;
領域をはみ出す連続記号や長い文字列（半角英数やURLなど）に対して改行処理を指定します。
「word-break: break-all;」では、一切の禁則処理が解除されるため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことがあることから好ましくないとされています。
心の声
どうにもこうにもならないときに最終手段として使ったりはします（ごめんなさい）overflow-wrap: break-word;
単語の途中で折り返さないと行ボックスの幅からはみ出してしまうときのみ、改行処理を施します。
単語の途中で折り返しが発生するのは、はみ出してしまうときのみなので、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができます。
word-wrap: break-word;
word-wrap プロパティから overflow-wrap プロパティへ改称されました。
overflow-wrap プロパティに未対応のブラウザの後方互換性のためにword-wrap プロパティの指定も併記しましょう。
参考ページ