web-dev-qa-db-ja.com

表のセルに複数行のテキストを表示する方法

データベースからテーブルセルに段落を表示したい。

結果は大きな1行になり、データベースでの編成方法を無視します。たとえば、「enters」を無視します（改行）

データベースにどのように記述されているかを正確に示したいと思います。

たとえば、段落が次のように保存されている場合：

hello ,
my name is x.

次の代わりに、まさにそのように見せたいです。

hello, myname is x.
htmlcsstablerow
92
Shady

適切なwhite-space:preに適用されるCSS <td> を使用します。すべてのテーブルセルに対してこれを行うには、たとえば：

td { white-space:pre }

または、マークアップを変更できる場合は、コンテンツの周りに <pre> タグを使用できます。デフォルトでは、Webブラウザはユーザーエージェントスタイルシートを使用して、このwhite-space:preルールをこの要素に適用します。

PRE要素は、囲まれたテキストが「事前にフォーマットされている」ことを視覚的なユーザーエージェントに伝えます。書式設定済みのテキストを処理する場合、視覚的なユーザーエージェント：

  • 空白をそのまま残すことができます。
  • 固定ピッチのフォントでテキストをレンダリングできます。
  • 自動ワードラップを無効にできます。
  • 双方向処理を無効にしてはいけません。
141
Phrogz
style="white-space:pre-wrap; Word-wrap:break-Word"

これにより、新しい行の問題が解決されます。 preタグは、必要なCSSを追加します。

42
Jajikanth pydimarla

コンテンツを<pre>（フォーマット済みテキスト）タグでラップします

<pre>hello ,
my name is x.</pre>
28
Joyce Babu

この問題を解決するための2つの提案：

解決策1：<div style="white-space:pre;">{database text}</div>または<pre>{database text}</pre>

テキストにhtmlタグまたはcssプロパティがない場合、これは適切なソリューションです。たとえば、タブを維持することもできます。

解決策2：\nを<p></p> or <br/>に置き換えます

これは、他のテキストプロパティや書式を失うことなく、ブレークラインを追加したい場合のソリューションです。 phpの例は$text = str_replace("\n","<br />",$database_text);になります

<p></p>または<div></div>を使用することもできますが、これにはもう少しテキスト解析が必要です。

23
Daniel Vila Boa

サーバー側のコードで、新しい行（\n）を<br/>に置き換えます。

PHPを使用している場合は、 nl2br() を使用できます

5
Rocket Hazmat

私は各行の後にhtmlコードタグを使用し（以下を参照）、それは私のために機能します。

George Benson </br>123 Main Street </br>New York, Ny 12344 </br>

3
Rene

こんにちは、私は同じことをする必要がありました！理由を聞かないでください。しかし、私はpythonを使用してhtmlを生成しており、リスト内のアイテムをループして、各アイテムがテーブルの単一セル内の行を取得する方法が必要でした。

私はbrタグがうまく機能していることがわかりました。例えば：

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>

これにより、必要な出力が生成されます。

3
chumbaloo

以下のコードは私にとって魔法のように機能します>>

td { white-space:pre-line }
2
Sumon Bappi

<br>の中に<td>だけを追加しましたが、うまくいきました。

1
Zvi