HTML/CSS:文字の改行が理想通りになりません

Question

2枚目のような改行をしたいのですが、

<p>Lorem ipsum dolor sit amet,<p/> <p>consectetur adipisicing elit, sed do<p/> <p>eiusmod tempor incididunt ut<p/> <p>labore et dolore magna aliqua. Ut<p/> <p>enim ad minim veniam, quis<p/> <p>nostrud exercitation ullamco<p/> <p>laboris nisi ut aliquip ex ea<p/> <p>commodo consequat. Duis aute<p/> <p>irure dolor<p/> ↑のようにPタグで改行しても上手くいきませんでした。 理想通りに改行するにはどうすればいいのでしょうか？ご教示お願いいたします。

現状↓

↓こうしたい

      <main class="l-main">
        <h1 class="title">PC カリキュラム</h1>
        <div class="l-contents">
          <section class="latest__work">
            <h2 class="gallery">最新の作品</h2>
            <ul class="gallery__list">
              <li>
                <img class="production" src="./assets/images/production_01.jpg" alt="夕焼けと海">
              </li>
              <li>
                <img class="production" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
              </li>
              <li>
                <img class="production" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
              </li>
              <li>
                <img class="production" src="./assets/images/production_04.jpg" alt="桟橋">
              </li>
              <li>
                <img class="production" src="./assets/images/production_05.jpg" alt="小船">
              </li>
              <li>
                <img class="production" src="./assets/images/production_06.jpg" alt="夕日の空">
              </li>
            </ul>
          </section>
          <section class="self__introduction">
            <h2 class="introduction__title">自己紹介</h2>
            <p class="text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            </p>
          </section>
        </div>
      </main>
      <footer class="l-fotter">
        <div class="copyright">
          <div class="copyright__inner">
            <p class="copyright__text">
              <small>© 2019 example.inc</small>
            </p>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>

@charset "UTF-8";

.l-wrapper {
    width: 1920px;
    background-color: #fffaf0;
}

.l-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-header__logo {
    width: 90px;
    height: 90px;
    margin: 20px 0px 20px 40px;
}

.nav__list {
    display: flex;
}

.nav__menu {
    margin-right: 80px;
    font-size: 180%;
}

.hero {
    height: 850px;
    background-image:url(../images/hero.jpg);
    background-repeat:  no-repeat;
    background-size: cover;
}

.title {
    display: flex;
    justify-content: center;
    color: #808080;
    font-size: 270%;
    margin: 130px 0px 130px 0px;
}

.gallery {
    color: #808080;
    font-size: 200%;
}

.l-contents {
    display: flex;
    margin-left: 70px;
}

.gallery {
    margin-bottom: 40px;
    color: #808080;
}

.gallery__list {
    display: flex;
    flex-wrap: wrap;
}

.production {
    width: 400px;
    height: 280px;
    padding: 0px 30px 20px 0px;
}

  .latest__work {
    width: 400%;
  }

  .introduction__title {
    color: #808080;
    font-size: 200%;
    margin-bottom: 40px;
  }

  .text {
    color: #808080;
    font-size: 180%;
  }

Answer 1

見本と現実ではフォントが異なるので同じ表示にはなりません。
（見本はMacのヒラギノで質問者の実装はWindowsのメイリオで見ていると思われます）
MacとWindowsはもともと入っているデフォルトフォントが異なるので、全く同じにできません。
特に両者は文字幅も異なるので、改行の位置までそろえることはできません。それに、このようなテキストでは改行位置をそろえる必要などありません。
（デザイン上絶対！という場合は除きます）

それでも少しでも近づけたいのであれば、以下のようなプロパティがcssにあるので試してみても良いかもしれません。

letter-spacing。デフォルトは0ですが、0.5pxくらい指定するとちょっと文字間が広がります。
line-height。見本のline-heightは1.6～1.8くらいかなぁ。

繰り返しますが見本と全く同じ改行位置にはなりませんし、同じ改行位置にする必要はありません。

Comments

[maring]

ありがとうございます！デフォルトフォントの事も考えておりませんでした。

Answer 2

推測するしかありませんが、見本も親要素のコンテンツ領域の中で単に折り返して表示しているだけだと思いますので、それと同じようになるよう、.textのコンテンツ領域の幅の調整とフォントの調整で似せていくしかないと思います。
しかし、これはフォントもブラウザもすべて同一にしない限りは、完全一致させるのは難しいでしょう。

改行のために<p>を使うのは好ましくありません。<p>はドキュメントの意味として「この内容は段落（Paragraph）要素ですよ」という文書構造を示すもので、視覚デザインのために使うべきではありません。

Comments

[maring]

ありがとうございます！Pタグの認識を改めます。