white-space: pre-wrapを指定するとインデントが入る

改行コード(\n)入りの文字列を表示する際、pre-wrapで改行させようとしたところ、改行はできるのですが、一行目にインデントが入ります。

表示された内容

   １行目 // ← このインデントをなくして、開始位置を左に寄せたい
２行目
３行目

###該当のソースコード

html
1<div class="wrap">
2一行目\n二行目\n３行目
3</div>

css
1.class {
2  white-space: pre-wrap
3}

###補足情報(言語/FW/ツール等のバージョンなど)
text-indent: 0;を試しても変化ありませんでした。<div>を<pre>で記載しても同じく変化なしでした。
なお、上記はIonic2の<ion-content>内に記載しています。

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、white-spaceプロパティをかけている要素内に余分な改行や空白などが残っていることが原因かと思います。white-spaceプロパティにpre-wrapを指定すると、要素内の空白やタブ文字、改行はそのまま残されるので、要素内に不要なタブ文字や空白、改行が混入しているときには不要な空白、タブ文字や改行がそのまま表示されてしまいます。一度そのような空白やタブ文字、改行が入っていないかどうか確認してみてはいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .class {
13            white-space: pre-wrap;
14        }
15    </style>
16</head>
17<body>
18<div class="class">一行目\n二行目\n３行目\n</div>
19</body>
20</html>

投稿2017/03/07 23:21

s8_chu

総合スコア14731

stvrz2

2017/03/07 23:37

ご回答いただき大変ありがとうございます！確かにどこかに空白かタブが紛れていると思われます。ただ、sassでグローバルに設定している設定やコンポーネント内ではmarign/padding含め、消した状態でも再現してしまいます。一方で、pre-lineで指定すると、インデントは消えました。やはり、どこかに入っているということなのでしょうね。。勉強になり、大変たすかりました！

行動規範の内容に同意します