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


119

データベースの段落を表のセルに表示したい。

結果は、データベースでの構成を無視して、大きな1行になります。たとえば、 'Enters'を無視する(新しい行)

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

たとえば、段落が次のように保存されているとします。

hello ,
my name is x.

私はそれをそのように正確に見せたい:

hello, myname is x.

回答:


164

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

td { white-space:pre }

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

PRE要素は、囲まれたテキストが「フォーマット済み」であることをビジュアルユーザーエージェントに伝えます。事前にフォーマットされたテキストを処理する場合、視覚的なユーザーエージェント:

  • 空白をそのまま残す場合があります。
  • 固定ピッチのフォントでテキストをレンダリングする場合があります。
  • 自動ワードラップを無効にすることができます。
  • 双方向処理を無効にしてはなりません。

親指を立てると、white-space広くサポートされているCSS 2.1プロパティです。IE8でテスト済み。問題なく動作します。
leesei

私は今white-space: pre;<td>タグに適用されたときに無視されている状況にあります。<pre></pre>コンテンツのラップに使用すると問題なく機能しますが、このテーブルの使用(Excelへのエクスポート)により、列と行の数が多いと、エクスポートされたファイルのサイズが膨らみ、ファイルの読み取り時にExcelがクラッシュします。(奇数、私は知っています)。他の誰かがこれを見たり、解決策を考えたりしていますか?
JoeBrockhaus 2013

1
この解決策は完璧とはほど遠い。その結果、Excelは改行のあるセルに対して複数の行を生成します。唯一の正しい答えがここで見つけることができます:bennadel.com/blog/...
Elmue

55
style="white-space:pre-wrap; word-wrap:break-word"

これは新しい行の問題を解決します。preタグは必要以上にCSSを追加します。


1
これは素晴らしいターゲットを絞ったソリューションです。<pre>タグはちょうど改行文字を許可超えてあらゆる種類のものを行いますが、これらのスタイル設定は、提示された問題のみを解決します。
moveson

データに改行が含まれているという問題がありました。テキストを<br/>、<div>、または<pre>で置き換えるなどの他の解決策は、テキストのみとして扱われていました。このソリューションは、その問題を完全に克服して機能します。
Anshuman Goel

素晴らしい!! これは私にとって非常にうまくいきます。複数のテキストをリストするJDataTableがあり、テキストを適切にラップするためにcssが必要でした!デイセーバーたくさんありがとう!
PatsonLeaner

1
これは改行を保持するという点では私にとってはうまくいきますが、すべてのセルの上部に改行を追加します...解決策はありますか?
jtr13

30

コンテンツを<pre>(事前にフォーマットされたテキスト)タグで囲む

<pre>hello ,
my name is x.</pre>

3
ただし、これはフォントをモノスペースで上書きします。
hardmooth、2018年

23

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



6

こんにちは私は同じことをする必要がありました!理由は尋ねませんが、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>

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


5

各行の後にhtmlコードタグを使用し(以下を参照)、それが機能します。

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


2
それは答えではなくコメントであるべきです。
Deep Sharma

<br>テーブルのセマンティクスを壊します。テキストベースのブラウザを使用してテーブルを表示すると、新しい行がテーブルの行のように表示されます。
JAT86 2018年


1

<br>内部のみを追加しましたが、<td>うまくいきます。改行してください!


0

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

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.