Q&A
style="white-space:pre-line"
これをどこに適用したのですか？
前提・実現したいこと
現在FlaskやDjangoを用いたwebアプリを作成しています．
その中で下記のようなコードを書き，リストの持つ要素からテキストデータを表示させています．
（諸事情により一部抜粋）
html
1<td>{{ var[0] }}</td>
このvar[0]はhtmlタグを含むのですが，文字列と認識されるようでそのまま表示されてしまいます．
また，改行を意味する\nも同時に認識させたいです．
var[0]の中身は以下です．
python
1var[0]="これは<b>サンプル</b>です．\nこれはsampleです．" 2
HTML
1<td>{{ var[0] }}</td> 2画面への出力結果： 3これは<b>サンプル</b>です．\nこれはsampleです．
試したこと
改行\nを認識させるために style="white-space:pre-line" を利用しました．
⇒うまく改行できました．タグは認識できていません．
（修正）タグを含まない文字列の場合は改行できましたが，タグと\nの両方を有する文字列の場合，white-spaceでも改行できませんでした．
これはサンプルです．\nこれはsampleです． ならばwhite-spaceにより これはサンプルです． これはsampleです． と表示されますが， これは<b>サンプル</b>です．\nこれはsampleです． の場合は これは<b>サンプル</b>です．\nこれはsampleです． のままでした．
文字列中のタグを認識させるために以下のように |safe を利用しました．
html
1<td>{{ var[0] |safe }}</td>
⇒うまく太字にできました．改行は認識できていません．
しかし両方を組み合わせると|safeが適用されタグは認識できるのですが，white-spaceによる改行が適用できなくなってしまいました．
質問ありがとうございます．
上の例とは異なる箇所に適用しているのですが，下記のとおりです．（ここでも同様にタグと改行を認識させたいです）
xxx.html一部抜粋
<div class="test" ...>
<div class="xxx" ... style="white-space:pre-line;">{{ val[0] |safe }}</div>
</div>
あれ？
今気づいたのですが、
> 画面への出力結果：
> これは<b>サンプル</b>です．\nこれはsampleです．
ということは、var[0]の中で\nは改行文字ではなく \ と n の２文字なのですか？
> 画面への出力結果：
> これは<b>サンプル</b>です．\nこれはsampleです．
この時点ではwhite-spaceも|safeも適用しておりません．
var[0]が持つ文字列をそのまま表示させた段階です．（htmlでは\nで改行とならないことを知りませんでした．また，pythonでタグを含む文字列を作成しても，タグとして認識されないことも知りませんでした．）
すみません，他の部分でミスがありました．<b>タブを文字列が有する場合，white-spaceを適用しても\nすら改行として認識されなくなりました．
ですから、var[0]の文字列をそのまま表示して \n と表示されるということは、改行文字ではなく \ と n の2文字なのでは？
つまり
var="これは<b>サンプル</b>です．\nこれはsampleです．"
>>> print(var)
これは<b>サンプル</b>です．
これはsampleです．
となりますが、実はvar[0]は
>>> var="これは<b>サンプル</b>です．\\nこれはsampleです．"
>>> print(var)
これは<b>サンプル</b>です．\nこれはsampleです．
という状態なのでは？
たしかに画面上では\とnの2文字として表示されています．
改行文字という意味を私が間違えて理解していたら申し訳ないのですが，エスケープシーケンスのことでしょうか．
pythonで改行されている文字列を取り込んでhtmlに渡しているので，ここの\とnの文字列ではなく改行のエスケープシーケンスです．
>>> var="これは<b>サンプル</b>です．\\nこれはsampleです．"
>>> print(var)
＞これは<b>サンプル</b>です．\nこれはsampleです．
＞という状態なのでは？
いえ，間違いなく\nです．
<b>タブを除去して
これはサンプルです．\nこれはsampleです．
の状態でwhite-spaceを適用すると改行されて表示されます．
（追記）
申し訳ありません．画面への出力結果はpythonではなくhtmlで表示させたときのものでした．
そのため，print(var[0])は実行していません．
<td>{{ var[0] |safe }}</td>
これで var[0] の値が「そのまま」挿入されるわけですよね。
このときどう表示されていますか？<b>～</b>の間が太字で表示されるのはわかりましたが、
これはサンプルです．\nこれはsampleです．
になりますか？それとも
これはサンプルです． これはsampleです．
になりますか？
<td>{{ var[0] |safe }}</td>
この場合，「サンプル」の文字が太文字になり，以下のように表示されます．
これはサンプルです．\nこれはsampleです．
以下のようにwhite-spaceを記述した場合も同様の結果になります．
<div class="test" ...>
<div class="xxx" ... style="white-space:pre-line;">
{{ val[0] |safe }}
</div>
</div>
画面の出力：
これはサンプルです．\nこれはsampleです．
ということは、var[0] の値として、改行文字（0x0a）ではなく \ (0x5c) と n (0x6e) の2文字が入っているということではないですか？
私はDjangoはあまり知らないですが、もしDjahgoによってそんな変換が起こっていなければ。
つまり改行文字が無いので white-space も効かないわけです。
ちょっとDjangoを調べたら、linebreaks というのがあるのを見つけました。
CSSで指定するのもいいですが{{ var[0] |safe|linebreaks }} でもいいかもしれません。
どっちにしろ、var[0]に改行文字が無いのでは当然ダメです。
Pythonのコードを見直してください。
Djangoの情報まで調べていただきありがとうございます．
＞つまり改行文字が無いので white-space も効かないわけです。
<b></b>タブを除去して\nのみの状態にするとwhite-spaceが効いて改行してくれますので，改行文字ではない\nが入っているわけではないと思いますが，一応見返してみます．
|safeの効果が先行してwhite-spaceとの間に不具合を生じているのかと予想していますが，そちらも調べてみます．
回答2件
0
ベストアンサー
【質問への追記・修正、ベストアンサー選択の依頼】を使ってやり取りしてきましたが、マークダウンが使えないので、私が試した結果を回答としてここに書きます。
View
Python
1def index_template(request): 2 data = { 3 'var1': "これは<b>サンプル</b>です．\nこれはsampleです．", 4 'var2': r"これは<b>サンプル</b>です．\nこれはsampleです．" 5 } 6 return render(request, 'index.html', data)
Template
HTML
1<html> 2<head> 3<title>test</title> 4</head> 5<body> 6 <div>{{var1 |safe|linebreaks}}</div> 7 <div>{{var2 |safe|linebreaks}}</div> 8</body> 9</html>
この結果は
これはサンプルです．
これはsampleです．
これはサンプルです．\nこれはsampleです．
となります。ページのソースは
HTML
1<html> 2<head> 3<title>test</title> 4</head> 5<body> 6 <div><p>これは<b>サンプル</b>です．<br>これはsampleです．</p></div> 7 <div><p>これは<b>サンプル</b>です．\nこれはsampleです．</p></div> 8</body> 9</html>
となっています。
以上から、質問者のvar[0]の値は、やはり、ここでのvar2の値となっている、つまり改行文字ではなく\とnの2文字になってしまっていると考えられます。
参考までに、|linebreaksを付けないと、以下のようになります。
Template
HTML
1<html> 2<head> 3<title>test</title> 4</head> 5<body> 6 <div>{{var1 |safe}}</div> 7 <div>{{var2 |safe}}</div> 8</body> 9</html>
結果
これはサンプルです． これはsampleです．
これはサンプルです．\nこれはsampleです．
ページのソース
HTML
1 2<html> 3<head> 4<title>test</title> 5</head> 6<body> 7 <div>これは<b>サンプル</b>です． 8これはsampleです．</div> 9 <div>これは<b>サンプル</b>です．\nこれはsampleです．</div> 10</body> 11</html>
var1には改行が入っているのがわかりますよね。
var2は当然\nの2文字のままです。
投稿2021/09/24 15:39
編集2021/09/24 16:15総合スコア8402
丁寧なご説明，感謝いたします．
実際のコードが膨大で多岐に渡るため，隅々までチェックしておりまだ解決までは至っていませんが，おそらく\nが文字か改行記号かの問題だと予想されるため，ベストアンサーとさせていただきます．
0
これでどうですやろ？
diff
1- <td>{{ var[0] |safe }}</td> 2+ <td>{{ var[0].replace('\n', '<br />') |safe }}</td>
投稿2021/09/24 12:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
