143

データベースの段落をテーブルセルに表示したいと思います。

結果は、データベースでどのように編成されているかを無視して、大きな1行になります。たとえば、「Enters」を無視します（新しい行）

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

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

hello ,
my name is x.

次の代わりに、そのように表示したいと思います。

hello, myname is x.
4

11 に答える 11

196

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

td { white-space:pre }

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

PRE要素は、囲まれたテキストが「事前にフォーマットされている」ことをビジュアルユーザーエージェントに通知します。事前にフォーマットされたテキストを処理する場合、ビジュアルユーザーエージェント：

  • 空白がそのまま残る場合があります。
  • 固定幅フォントでテキストをレンダリングできます。
  • 自動ワードラップを無効にする場合があります。
  • 双方向処理を無効にしないでください。
于 2012-06-07T18:00:36.607 に答える
72 
style="white-space:pre-wrap; word-wrap:break-word"

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

于 2015-05-01T23:01:24.410 に答える
33

<pre>コンテンツを（事前にフォーマットされたテキスト）タグでラップします

<pre>hello ,
my name is x.</pre>
于 2012-06-07T18:00:34.373 に答える
30

この問題を解決するための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>が、これにはもう少しテキストの解析が必要です。

于 2012-06-07T18:05:04.713 に答える
11

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

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>

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

于 2016-05-26T10:01:08.953 に答える
10

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

td { white-space:pre-line }
于 2019-04-25T05:55:28.700 に答える
8

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

PHPを使用している場合は、nl2br()

于 2012-06-07T18:00:42.627 に答える
7

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

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

于 2013-11-04T13:39:38.360 に答える
4

<br>内側にのみ追加しました<td>が、うまく機能します。

于 2019-03-24T17:16:36.387 に答える
2

私の場合、このように使用できます。

td { white-space:pre-line , word-break: break-all}
于 2020-10-22T09:54:40.800 に答える
1

\n中に入れたい文字列変数がある場合は、td試してみることができます

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
于 2020-05-16T07:01:01.963 に答える