brタグを入れたのに改行されない

brタグを入れたのに改行されません。
htmlに

<div class="detailimg">
   <img src="{% static 'detail.jpg' %}" alt="詳細">
   <h2>こんばんは！今日は何回笑いましたか？<br>挨拶は大事にしましょう</h2>
   <h3>寝る前にその日のことを振り返りましょう<br>リラックスして次の日を迎えましょう</h3>
</div>

と書きました。cssには

*{
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.detailimg{
  float: left;
  position: relative;
  padding-top:30px;
  padding-left:80px;
  padding-right:80px;
}

.detailimg h2{
  position: absolute;
  color:white;
  font-family :Quicksand, sans-serif;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.detailimg h3{
  position: absolute;
  color:white;
  font-family :Quicksand, sans-serif;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-70%,-70%);
  -webkit-transform: translate(-70%,-70%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

と書きました。
今

こんばんは！今日は何回笑いましたか？
挨拶は大事にしましょう

寝る前にその日のことを振り返りましょうリラックスして次の日を迎えましょう

と表示されています。
寝る前にその日のことを振り返りましょう　と　リラックスして次の日を迎えましょう　の間の<br>が効いていません。
white-space: nowrap; を指定したからこのようになっているのでしょうか？

m.ts10806

2017/10/04 06:22 編集

white-space: nowrap;の意味はわかって（どのような影響があるか理解して）入れてるんですよね？

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

回答3件

ベストアンサー

white-space問題は確かにありそうですが、提示のソースだけではおそらく質問者さんが見ているのと
同じような画面を再現できないと思います。
親にfloatがありpositionがありpaddingがあり、その中の要素がHxタグですが、それにもpositionがありさらに文字が白でtranslateも指定されている、top,leftが指定されている・・・と提示ソースだけだとごちゃごちゃしていて分かりにくいです。それで改行して見えない可能性もあります。
つまりもっと外からの指定が影響している可能性もあります。

現在の指定だけでは改行は行われているように思います。
ひとまず下記のように位置などに関するものを全て削ってみたところ

css
1*{
2    margin: 0;
3    padding: 0;
4    white-space: nowrap;
5}
6.detailimg{
7}
8
9.detailimg h2{
10  font-family :Quicksand, sans-serif;
11  margin:0;
12  padding:0;
13}
14
15.detailimg h3{
16  font-family :Quicksand, sans-serif;
17  margin:0;
18  padding:0;
19}

↓のように想定通り改行ができていることが確認できます（当方、Chrome最新です）

このように、何が影響しているかを確かめるために、ざっと削って影響箇所を特定していく癖をつけると良いと思いますよ。
今回の場合は色々と配置に関する指定をされているので、それを一気に削ってみて、
ひとつずつ復帰させて、どの時点で改行が効かなくなったのかを確かめてみると良いです。

提示ソース内にその原因がない可能性もあるのでそこは状況に応じて同じようにひとつひとつ確かめてください。
もしかしたらhtml自体に誤記があったり、この手の現象の原因は意外と簡単なところだったりします。

追記：
もちろんaozukiさんが仰るように、「そもそも見出しタグに改行はタグの持つ役割・意味合いとして大丈夫か？」というところは検討の余地があります。

投稿2017/10/04 06:43

編集2017/10/04 06:44

m.ts10806

総合スコア80850

m.ts10806

2017/10/04 21:34

どのように解決されたのでしょうか？解決を導くための手法は例示していますが、これだけでは解決とはなりません。ベストアンサーを選んだということは解決したということですよね？解決していないのであればベストアンサーを選んではいけませんよ。

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

white-space: nowrap; を指定したからこのようになっているのでしょうか？

その通りです。が、分かっているなら質問する前にリファレンスなど参照すれば良いのでは…？
ちなみに、見出しタグの中に改行を挿入するのは個人的にあまり推奨できません。（「見出し」の意味を考えてみてください）

投稿2017/10/04 06:25

退会済みユーザー

総合スコア0

こんにちは、h1~h6タグでは改行は効かないはずです！
下のように変えたら改行されるでしょう！

<div class="detailimg">
   <img src="{% static 'detail.jpg' %}" alt="詳細">
   <h2>こんばんは！今日は何回笑いましたか？</h2><h2>挨拶は大事にしましょう</h2>
   <h3>寝る前にその日のことを振り返りましょう</h3><h3>リラックスして次の日を迎えましょう</h3>
</div>

追記：すみません、効くようです。ブラウザを更新してみたり、ブラウザをvivaldiなどに変えてみてはどうでしょうか？

投稿2017/10/04 06:22

編集2017/10/04 06:28