データベースの段落をテーブルセルに表示したいと思います。
結果は、データベースでどのように編成されているかを無視して、大きな1行になります。たとえば、「Enters」を無視します(新しい行)
データベースにどのように書かれているかを正確に示したいと思います。
たとえば、段落が次のように保存されている場合:
hello ,
my name is x.
次の代わりに、そのように表示したいと思います。
hello, myname is x.
white-space:pre
適切なに適用されたCSSを使用したい<td>
。たとえば、すべてのテーブルセルに対してこれを行うには、次のようにします。
td { white-space:pre }
または、マークアップを変更できる場合は<pre>
、コンテンツの周囲にタグを使用できます。デフォルトでは、Webブラウザはユーザーエージェントスタイルシートを使用して、white-space:pre
この要素に同じルールを適用します。
PRE要素は、囲まれたテキストが「事前にフォーマットされている」ことをビジュアルユーザーエージェントに通知します。事前にフォーマットされたテキストを処理する場合、ビジュアルユーザーエージェント:
- 空白がそのまま残る場合があります。
- 固定幅フォントでテキストをレンダリングできます。
- 自動ワードラップを無効にする場合があります。
- 双方向処理を無効にしないでください。
style="white-space:pre-wrap; word-wrap:break-word"
これにより、改行の問題が解決されます。preタグは、必要以上にCSSを追加します。
<pre>
コンテンツを(事前にフォーマットされたテキスト)タグでラップします
<pre>hello ,
my name is x.</pre>
この問題を解決するための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>
が、これにはもう少しテキストの解析が必要です。
こんにちは私は同じことをする必要がありました!理由は聞かないでください。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>
これにより、必要な出力が生成されます。
以下のコードは私にとって魔法のように機能します>>
td { white-space:pre-line }
サーバー側のコードで、新しい行(\n
)を。に置き換え<br/>
ます。
PHPを使用している場合は、nl2br()
各行の後にhtmlコードタグを使用し(以下を参照)、それは私のために機能します。
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
<br>
内側にのみ追加しました<td>
が、うまく機能します。
私の場合、このように使用できます。
td { white-space:pre-line , word-break: break-all}
\n
中に入れたい文字列変数がある場合は、td
試してみることができます
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>