[CSS] 글자를 줄 바꿈 없이 한 줄로 표현하기 (ft. white-space/overflow/text-overflow)

CSS를 통해 텍스트 글자를 줄 바꿈 없이 한 줄로 표현하는 방법에 대해 알아보자.

---

보통 글자가 길면 자동 줄바꿈이 일어나 표현되고는 하는데, 만약 칸의 여유가 없고 디자인적으로도 넘치는 부분을 잘라내고 한 줄로만 표현하고자 한다면 이는 javascript를 사용하지 않고도 css만으로도 표현이 가능하다.

 

가장 흔하게 알려진 방법으로는 이 아래 3가지 속성을 주로 사용하여 제어를 하는 방법이다.

• white-space : 요소 내부의 공백을 처리하는 방법에 대한 설정
  ( normal|nowrap|pre|pre-line|pre-wrap|initial|inherit )
• text-overflow : 공백 문자를 처리하는 법 즉, 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법에 대한 설정이며 잘리거나 줄임표(...)를 표시하거나 같은 것들을 설정한다.
  ( clip|ellipsis|string|initial|inherit; )
• overflow : 굳이 설명이 필요하지 않은 값이지만 콘텐츠를 자를지 스크롤을 만들지에 대한 설정이다.
  ( visible|hidden|scroll|auto )

이 3가지 속성을 활용한 예제를 한번 살펴보자.

---

div {
  border: 1px solid black;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

▷ 결과

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque enim omnis, facilis ipsum quibusdam reprehenderit fugiat eum voluptatem ducimus modi in doloremque porro veniam quia! In cum ipsa nulla dolores.</div> 

div {
  border: 1px solid black;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

이렇게 보면 크게 어렵지는 않을 것이다.

추가적으로 W3Schools에서 제공하는 예제도 있으니 한번 살펴보는 것을 추천한다.

---

아 그리고 나 역시 몰랐던 방법인데,

이 같은 방법 말고도 또 다른 방법이 존재하는데 아래 다른 블로그 글을 통해 확인해보면 좋을 것 같다.

CSS | text 한 줄로 표현하기

CSS | text 한 줄로 표현하기