이번에는 CSS로 한 문장이 끊어지지 않았을 때의 방법을 학습해 갑니다.
먼저 HTML을 작성합니다.

index.html

div class="form">
    <h1 class="title">ピエン</h1>
    <p>ピエンピエンピエンピエンピエンピエンピエン</p>
  </div>

style.css

.form {
  border: 4px solid black;
  width: 10%;
}


p {
  border: 2px solid pink;

}

p태그의 피엔이 들어가 있지 않네요.
그럼 여기에 한 줄로 들어가고 싶습니다.

style.css

p {
  border: 2px solid pink;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

브라우저에서 봅시다.


네, 끝났어요.

①overflow

이것은 요소 내에 들어가지 않을 때 사용합니다.
몇 가지 종류가 있지만 여기에서는 할애합니다.
인용 ▶ htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / 두 cs / u b / Cs / ゔ rf w

②text-overflow

이것은 숨겨진 부분이 사용자에게 어떻게 표시되는지를 나타냅니다. 몇 가지 종류가 있습니다만, 이번에도 할애해 갑니다.
인용 ▶ htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / 두 cs / u b / C s / xt-o rf ぉ w

③white-space

여기에서는 요소 내의 공간을 어떻게 할지 결정할 수 있습니다.
인용 ▶ htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / Cs / u-te-s Pase


여러가지 있으므로 시도해 봅시다 👍