CSSで「word-break」と「white-space」が両立しない

Question

###■目的
テキストエリアの入力内容をjsで出力しています。

出力内容を「出力範囲に収めつつ」「改行も出力したい」と思っています。

が、

###■問題
「word-break」と「white-space」が両立させられません。

実際の動きはこちらです。
https://jsfiddle.net/qxjyLd1m/

ご覧のように、

word-break: break-all;

がないと、エリアの入力内容が出力範囲に収まりません。

でも、これだと改行を入力しても反映されません。

そこで改行を反映するために、

white-space: pre;

を入れて、改行を反映させてみます。

しかしこんどは、エリアの入力内容が出力範囲に収まらなくなってしまうのです！笑

なんとか改行を出力させつつ、出力範囲に収める方法はございませんでしょうか？

宜しくお願い致します。

Answer 1

  word-break: break-all;
  white-space: pre-wrap;

pre-wrap

連続する空白はそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。

white-space - CSS | MDN

Comments

[退会済みユーザー]

わー助かりました！

入れ子にしてabsoluteとrelativeにしてみたり、あーだこーだ2時間くらいやってました。笑

どうもありがとうございます！