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

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

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

CSS
1.main {
2  text-align: center;
3  font-family: serif;
4}
5.kodawari {
6  font-size:28px;
7  margin:100px 0 40px 0 ;
8  letter-spacing: 10px;
9}
10.setumei {
11  font-size:18px;
12}
13p {
14  line-height: 2;
15  margin: 0;
16}

miyabi_pudding

2020/05/29 11:32

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

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

回答2件

ベストアンサー

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

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