preタグ

pre要素で折り返し改行させる方法

pre要素は通常だと幅を超える文字列があっても改行しない。 改行させるようにするには、white-spaceプロパティにpre-wrapを指定する[1]。

 <node id='10491234567' ... lat='34.0682913' lon='139.4840637'/>

pre要素で横スクロールさせる方法

幅を超える文字列があった場合、横スクロールさせるには overflow-x: auto; を指定する。

overflow-x: scroll; とした場合は、横幅を超える文字列がなく、横スクロールの必要がない場合にも スクロールバーが表示される。

CSS に入れれば、パソコンは OK だが、スマホの Chrome は何故かスクロールしない。 以下のように、 style="overflow-x: auto;"で入れると、うまく行った。

 <node id='10491234567'   ...   lat='34.0682913' lon='139.4840637'/>

CSSは10数年修正を繰り返したため、不備があったようだ。 整理し直すと、CSS に overflow-x: auto; を指定することにより、スマホでもうまくスクロールするようになった。

pre要素で縦スクロールさせる方法

高さは使う場所によって変わるので、下の例のように指定する。

<pre class=code1 style="height: 400;">

リファレンス