自動改行を無効にして横スクロールする

自動改行を無効にして横スクロール

通常のブロック要素では、文字が横幅に達すると自動的に文字が改行されます。

しかし、状況によっては自動改行せずに横スクロールにしたいという時もあります。例えば、ソースサンプルを表示させるような場合であれば、自動改行されると非常に見にくくなるために横スクロールさせたいなど。

自動改行を無効にして横スクロールさせたい場合は、white-space: pre;もしくはwhite-space: nowrap;とoverflow-x: scroll;をCSSで設定します。

div.class{
	width: 150px;
	white-space: pre;
	overflow-x: scroll;
}

ボックスの横幅が指定されていない場合は、横幅が100%になるまではボックス内に表示され、横幅100%で収まらないときに横スクロールとなります。

white-spaceの仕様

white-spaceはスペースや改行の表示方法を指定するプロパティです。

white-spaceの値

normal
(初期値)

・スペースを無視
・改行を半角スペースで表示
・自動改行する

pre

・スペースを表示
・改行を表示
・自動改行しない

nowrap

・スペースを無視
・改行を半角スペースで表示
・自動改行しない

pre-wrap

・スペースを表示
・改行を表示
・自動改行する

pre-line

・スペースを無視
・改行を表示
・自動改行する

overflowの仕様

overflowは範囲内に収まらない文字などがあった場合に、どう表示するかを指定するプロパティです。

overflowの値

visible
(初期値)

収まらない部分がはみだして表示されます

hidden

収まらない部分が表示されません

scroll

スクロールできるようになります

auto

ブラウザの仕様に従います

no-display

収まらない場合にボックス全体が削除(display:none;)になります

no-content

収まらない場合にボックス全体が非表示(visibility:hidden;)になります

overflowは左右と上下を個別に設定することもできます。半角スペースを空けて記述すると左右→上下の順番で設定できます。

/* 左右:scroll 上下:hidden */
overflow: scroll hidden;

また、overflow-xで左右、overflow-yで上下の個別設定もおこなえます。

overflow-x: scroll; /* 左右 */
overflow-y: hidden; /* 上下 */