【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上からテキストをコピーしてメモ帳に貼り付けて見ます。

↓

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

プログラムソースコードなど他の人がコピーしそうな部分に
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)