回答:
white-space:pre
適切なに適用されたCSSを使用したい<td>
。これをすべてのテーブルセルに対して行うには、たとえば、次のようにします。
td { white-space:pre }
または、マークアップを変更できる場合は<pre>
、コンテンツの周りにタグを使用できます。デフォルトでは、Webブラウザーはユーザーエージェントのスタイルシートを使用して、white-space:pre
この要素に同じルールを適用します。
PRE要素は、囲まれたテキストが「フォーマット済み」であることをビジュアルユーザーエージェントに伝えます。事前にフォーマットされたテキストを処理する場合、視覚的なユーザーエージェント:
- 空白をそのまま残す場合があります。
- 固定ピッチのフォントでテキストをレンダリングする場合があります。
- 自動ワードラップを無効にすることができます。
- 双方向処理を無効にしてはなりません。
white-space: pre;
、<td>
タグに適用されたときに無視されている状況にあります。<pre></pre>
コンテンツのラップに使用すると問題なく機能しますが、このテーブルの使用(Excelへのエクスポート)により、列と行の数が多いと、エクスポートされたファイルのサイズが膨らみ、ファイルの読み取り時にExcelがクラッシュします。(奇数、私は知っています)。他の誰かがこれを見たり、解決策を考えたりしていますか?
style="white-space:pre-wrap; word-wrap:break-word"
これは新しい行の問題を解決します。preタグは必要以上にCSSを追加します。
<pre>
タグはちょうど改行文字を許可超えてあらゆる種類のものを行いますが、これらのスタイル設定は、提示された問題のみを解決します。
コンテンツを<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を生成していて、リスト内のアイテムをループして、各アイテムがテーブルの単一セル内で独自の行を取得する方法が必要でした。
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>
これにより、必要な出力が生成されます。
各行の後にhtmlコードタグを使用し(以下を参照)、それが機能します。
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
あなたが\n
中に入れたい文字列変数がある場合td
、あなたは試すことができます
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
white-space
広くサポートされているCSS 2.1プロパティです。IE8でテスト済み。問題なく動作します。