スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

<PRE> で折り返す

CATEGORYCSS
改行コードだけは見た目に反映させたい(<br> は使わない)けど、表示領域でテキストを折り返したいんだ。
「<br> を入れておけよ」って話はあるんだけど、xsl を使っているので、そうもいかず...
CSS の範疇で、どうにかしたいんだよなあ、と思っててたどり着いたのが 『長い行を適当に表示するPRE - 子供、いらない
white-space: -moz-pre-wrap;  /* Mozilla */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* CSS3 */
word-wrap:   break-word;     /* IE 5.5+ */
これで OK って思ってたんだけど、
  • PRE に width を指定しなきゃいけない
  • % 指定だと、TABLE の内側では、TABLE のレンダリングに負けちゃう
ってことで、期待通りの表示にならない。


で、悩みに悩んだ末、結局採用したのは TEXTAREA 。

× <PRE style="word-wrap: break-word">
○ <TEXTAREA readonly="true" style="overflow-y: visible;">

TEXTAREA のデフォルトなスタイルを打ち消すために、 border: 0 や background-color: transparent も指定しなければいけないんだけど。

■PRE
とても長い文章があったときに、改行はブラウザの見た目でも折り返して表示してもらいたいんだけど、見えている範囲で折り返して欲しいんだよな。「改行」ってのは、コンテンツなのか、スタイルなのか、ちょっと悩ましい。

で、改行したのがコレ。

■TEXTAREA


また、テンプレートのスタイルとかが適用されたり、表示としてはむごいことになるのだけれど。
むごいのを晒すのもアレなので、Firefox と IE については、スタイルを調整してみた。




まあ、いい勉強になったから、よしとしようか。
「CSS ハック」といわれていることも、なんとなくわかったし。

更に追記。
IE だと、 TEXTAREA にテンプレートのスタイルの指定に関係なさそうな変な余白が入ってしまう。
そういえば、調べてるときに引っかかったページがあったな、ということでメモ。
TEXTAREAの謎の余白
Win + IE で、 <TEXTAREA> や <INPUT> において、 CSSの指定次第では、謎の余白ができたり、文字を入力すると幅が伸びたり、 とにかく変な挙動をすることについての解決策。
↑で書かれてた 「<label> でくくる」というのを使ってみた。
スポンサーサイト

0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。