CSS/スタイルシート | テキストに関する指定

クリックで全選択状態になります。

.sample { white-space: normal; }

.sample { white-space: pre; }

.sample { white-space: nowrap; }

.sample {
  white-space: normal;
  overflow: auto;
}

<div class="sample">ソース</div>

abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz

.sample {
  white-space: pre;
  overflow: auto;
}

<div class="sample">ソース</div>

abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz

.sample {
  white-space: pre;
  width: 600px;
  height: 100px;
  overflow: auto;
}

<div class="sample">ソース</div>

abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz

.sample {
  white-space: nowrap;
  overflow: auto;
}

<div class="sample">ソース</div>

abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz abcdefg hijklmn opqrstu vwxyz

値/プロパティ値

半角スペースや改行など、入力通りに表示せさます。

white-space: pre;の場合、CSSよりタグで<pre>を使った方が簡単。