【HTML・CSS】 white-space:pre; の見た目では分からない落とし穴について

テキストの整形に<pre>タグの代わりに
CSS(スタイルシート)で「white-space:pre;」を使ってみたところ
Firefox上で表示の white-space:pre;」を使った改行を含むテキストをコピーすると
改行が無いテキストとしてコピーしてしまう現象について簡単にメモ。

Internet Explorer 9、Firefox、Chrome、Sfari(Windows版)、Opera で
同じ現象が起こるか確認してみましたがFirefox(ver15.0.1)だけでした。


下の画像は背景に色のついた範囲が<pre>タグで囲たテキストと
white-space:pre;」が適用されたテキストで、
実際にFirefox上からテキストをコピーしてメモ帳に貼り付けて見ます。

FireFox上のテキストをコピー

下の画像のように「white-space:pre;」を適用した部分からのコピーでは
改行が無くなったテキストを貼り付けてしまっています。

FireFox上からコピーしたテキストを貼り付け

プログラムソースコードなど他の人がコピーしそうな部分に
white-space:pre; の方を使うのは避けた方がよさそうです。



<pre>タグで囲ったテキストと
CSSで「white-space:pre;」を適用したテキストを用意したので
Firefoxで背景に色がついている範囲をコピーしてメモ帳などに貼り付けてみてください。

<pre>タグ使用

#include <stdio.h>

int main(void)
{
	printf("hello world");

return 0;
}

CSSで「white-space:pre;」適用

#include <stdio.h> int main(void) { printf("hello world"); return 0; }
[ 2012/09/28 18:48 ] HTML・CSS | TB(0) | CM(0)
SPONSORED LINK
人気ブログランキング
トラックバック
この記事のトラックバックURL
http://8cmp.blog.fc2.com/tb.php/47-5a93b9bc

コメントの投稿












管理者にだけ表示を許可する
▲ページトップ