9. html - css - <pre> 等の縦幅のみを指定する

 
9.1 概要
9.2 デフォルトの状態
9.3 縦幅を指定する
9.4 まとめ

9.1 概要

 現在 prism.js でシンタックスハイライトさせています。  横幅がはみ出したときは折り返し、縦幅がはみだしたときはスクロール表示したいと考えております。

9.2 デフォルトの状態

 ほぼ何も指定なしとして

<pre style="border: solid 1px #000000;">
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん
</pre>
 と書くと下記のように表示されます。
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん

9.3 幅を指定する


pre
{
	max-width: 6em;
	max-height: 3em;
}
 と書きますと、下記のような表示になります。  ブラウザによって見え方が異なりそうですが・・・。
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん

 Firefox 58.0.2 では下記のように表示されます。









 これを


pre
{
	max-width: 6em;
	max-height: 3em;
	overflow-y: auto;
}
 と書くと
あいうえおかきくけこ
さしすせそたちつてと
なにぬねのはひふへほ
まみむめもやゆよわをん

 となって少なくとも Firefox 58.0.2 では下記のように縦のスクロールバーが表示されるのです。


9.4 まとめ

HTML クリックリファレンス」では、overflow-yInternet Exproler 独自の仕様とありますが、「MDN web docs」では、他のブラウザでも対応しているように記述されています。  少なくとも、Firefox 58.0.2 は対応しています。  iphone 6 上の Safari では残念ながら機能していません。  overflow-y に指定できる値は以下の通りです。
意味
visible はみ出して表示する
scroll スクロールバーを表示して見られる
(はみ出していなくてもスクロールバーを表示)
hidden はみ出た部分を隠す
auto ブラウザ依存
Firefox でははみ出したときのみスクロールバーを表示)