横の広がりを防ぐためには

Question

<p>タグで複数の文章を書き、text-align:center; として画面の中央に文字を持ってくることはできました。 ですが、パソコンの全画面にすると、文字が横に長く広がってしまいます。 どのようにすれば、写真のように綺麗な改行をすることができるのでしょうか。 また画面を縮小した時にも文字が綺麗に見えるようにしたいです。 [](fe6543df02917a0e837fee487b778562.jpeg)

<header>
     <h2><img src="images/main-vsual-nontitle.png"></h2>
      <div class="main">
          <div class="kodawari">和菓子処松風屋のこだわり</div>
        <div class="setumei">
          <p>当初は、対象10年に創業した約100年の歴史を持つ和菓子屋です。</p>
          <p>初代社長、佐々木市郎は俳聖松尾芭蕉を敬愛しており、「奥の細道　芭蕉最中」など芭蕉にゆかりのある菓子を作り続けてきました。</p>
          <p>松尾芭蕉が奥の細道の旅の間に見出した概念に「不易流行」というものがあります。</p>
          <p>これは、いつまでも変化しない本質的なものを忘れない中にも、新しい変化を取り入れていくということです。</p>
          <p>当社はこの言葉を経営理念とし、昔からの伝統を守りつつ、時代に流れや新しい変化を取り入れ、常により良い菓子を探求し続けています。</p>
        </div>
      </div>
      <img src="images/name.png" class="green">
      <br>
      <p>株式会社松風屋三代目　佐々木啓仁</p>
      <input type="look" value="詳しく見る">
    </header>  

.main {
  text-align: center;
  font-family: serif;
}
.kodawari {
  font-size:28px;
  margin:100px 0 40px 0 ;
  letter-spacing: 10px;
}
.setumei {
  font-size:18px;
}
p {
  line-height: 2;
  margin: 0;
}

Comments

[miyabi_pudding]

<br>入れないと多分無理かと。
ただ、禁則処理系のCSSでもやりようはあるかもしれませんが、
素直に<br>入れるのがいいかと思います。

Answer 1

改行したい位置に<br>タグを書くと改行します。

<div class="setumei">
  <p>
    当初は、対象10年に創業した約100年の歴史を持つ和菓子屋です。<br>
    初代社長、佐々木市郎は俳聖松尾芭蕉を敬愛しており、「奥の細道　芭蕉最中」など<br>
    芭蕉にゆかりのある菓子を作り続けてきました。<br>
    松尾芭蕉が奥の細道の旅の間に見出した概念に「不易流行」というものがあります。<br>
    これは、いつまでも変化しない本質的なものを忘れない中にも、<br>
    新しい変化を取り入れていくということです。<br>
    当社はこの言葉を経営理念とし、昔からの伝統を守りつつ、<br>
    時代に流れや新しい変化を取り入れ、常により良い菓子を探求し続けています。
  </p>
</div>

Answer 2

手っ取り早いのは見た目上開業されている箇所に<br>タグを入れてやることです