改行されても空白がずれてしまいます

質問

カテゴリがMYSQLかもしれません。その場合はご指摘お願いします。

phpとmysqlと使って掲示板のような機能を作っています。
TEXTAREAフォームに改行して文字列を入力し、DBにINSERTで追加します。
表示させるときにSELECTして、nl2br( )を使っています。
表示の際、改行は実行されるのですが　
空白（スペース）がTEXTAREAフォーム入力したときと違うように表示されます。
たとえばTEXTAREAフォームでは

本日　 10:00～14:00
　　　　　17:00～23:00

と入力したのにecho で表示させると

本日　 10:00～14:00
17:00～23:00

というように改行した行の空白がずれてしまいます。
DBにINSERTするとき、DBから取り出すとき、取り出して表示させたとき、
どの段階でずれるという問題が起きているのでしょうか。
また、どういった対処をすればよろしいでしょうか。
どうかご教授お願いします。

以下がソースコードの一部です。
//入力して追加する部分
<FORM method="POST" action="test1.php">
<TEXTAREA NAME="test1" COLS="60" ROWS="7"></TEXTAREA>
<INPUT type="submit" name="submit" value="追加">
で入力し送信して,POSTメソッドで受け取り
$add_text = $_POST["test1"];
mysql_query("insert into `test`(`text`) VALUES('$add_text')");
「test」というテーブルに追加しています。

//表示する部分
$result = mysql_query("select * from test");
$rows = mysql_num_rows($result);
if($rows == 0){
} else{
while($row=mysql_fetch_array($result)){
echo nl2br($row['text']);
}

回答No.1

duron · ベストアンサー

おそらくechoで出力されたページのHTMLソースを開いてみると
入力したとおり17:00～23:00の前に空白が出力されているのではないかと思います。
(もし出力されてなかったらごめんなさい。以下は無視して次の回答者をお待ちください)

HTMLは連続した空白をひとつの空白として表示するようになっています。
空白を空白として表示するには
(1)空白を「&nbsp;」「&ensp;」「&emsp;」「&thinsp;」などに変換する。
(2)<textarea>タグ内に出力する。
(3)<pre>タグ内に出力する。
などがあると思います。
(1)は空白の幅がうまいことあわないとやはりずれるので面倒かと思います。
(2)はtextareaの枠が気にかかるかもしれません。
(3)が一番無難かと思います。

ちなみに(2)と(3)は改行を改行として扱ってくれるのでnl2br()による変換はいりません。

お礼

（３）でうまく空白も表示できるようになりました！（フォントが変わった気もしますが・・）

ありがとうございました！

回答No.2

himajin100000

こういう時なんでみんなbr要素やpre要素使いたがるんだろ。
white-spaceプロパティがあるのに…
http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space

お礼

CSSを使ったことはありませんでしたが、white-spaceプロパティで何とかできました。
ありがとうございました！