pre 要素に対する印刷用 CSS

サイトリニューアルと同時に印刷用スタイルも書いてみたんですが、ふと気がついたのは、pre 要素の中身って印刷するとき紙からはみ出しちゃって全部印刷できてないじゃんっていうこと。 Blog の記事を印刷する人ってそんなにはいないと思いますが、一応対策しておくかということで書いてみました。と言っても、別に目新しいことはしていませんので期待せずにお願いします。 さて、当サイトで使用している pre 要素には、画面表示用のスタイルとして、「overflow: scroll;」 を指定、改行せずにはみ出した部分はスクロールバーで表示させていますが、当然ながら印刷時はスクロールバーなんて出ないので、普通に紙からはみ出して終了と。 なので、印刷スタイルでは pre 要素を基本的に整形済みテキスト （Preformatted Text） として表示しつつも、印刷領域からはみ出してしまう場合のみ適当に改行が

[t298ra]

[印刷]

[webmarksjp]

CSS

[kiyokichi]

　*CSS　自動改行　IEとOperaとFx

[kurobuchi]

折り返さずに途中で切れてしまうpreの対策について。

[nshash]

おさえておくと良いTips

[leva]

おさえておくと良いTips

[ben-kei]

pre 要素に対する印刷用 CSS

[sotarok]

pre要素内の長い文字列は折り返されずはみ出てしまう→white-spaceで折り返しを指定してやれば回避できる

[XIAORING]

印刷用

[kimura_m_29]

『すごーく長い URI とか、空白を含まず長い半角文字列に関しては、Firefox で折り返しが発生しない』これが問題なんですよね…こまる

[asagi29]

『すごーく長い URI とか、空白を含まず長い半角文字列に関しては、Firefox で折り返しが発生しない』これが問題なんですよね…こまる

[picnicgraphic]

pre要素の中身ってはみ出して全部印刷できないじゃん→各ブラウザのデフォルトスタイルはpre要素に対し空白文字は改行入れず記述のまま表示する指定→各ブラウザ用に自動で改行するという指定をしてあげる。

[rosylilly]

pre要素をきれいに印刷したいんです！

[hiro_y]

pre要素を全部印刷できるように。

[kkobayashi]

印刷用CSSを書いておくのはよいことだと思うのだ。サイドバー消すとか。めんどいけどやろうかな。