[CSS] text-overflow (텍스트 줄 조절/속성)

사이트를 만들다 보면 긴 글을 불러오게 되거나

웹에서 모바일로 넘어갈 때 긴 글 때문에 레이아웃이 망가질 때가 있다

 

그래서

한줄 이상 넘어가면 '...'되어서 안 보이게 지정하고 싶을 때 쓰는 방법이다

한 줄 혹은 2줄,n줄 이상 안 보이게도 할 수 있다 

 

아래글을 상황에 맞게 text-overflow  : ellipsis 를 사용하여 지정 줄 혹은 크기에서 벗어나면 '...'효과를 나오게 해본다.

 

지정된 사이즈, 한줄 넘어가면 ...표

 

<p class="line-1">
아침이 피어나듯이 강아지, 보고, 별 별 거외다. 하나에 별에도 그러나 어머니, 밤이 봅니다. 피어나듯이 이국 이름자 시인의 내린 봅니다. 잠, 하늘에는 봄이 봅니다.

패, 별을 릴케 별이 지나고 하나에 별 하늘에는 가득 거외다. 북간도에 무덤 계절이 했던 없이 애기 있습니다. 파란 이름과, 사랑과 내 어머님, 소녀들의 말 했던 않은 거외다. 했던 지나고 이런 가득 가을 하나에 노루, 말 비둘기, 봅니다.

그리고 소녀들의 하나에 추억과 언덕 속의 새워 있습니다. 밤이 언덕 소학교 까닭이요, 있습니다.
</p>​

 

.line-1{
  max-width:300px;
  height:1.2rem;
  white-space:nowrap;/*한줄로만*/
  overflow : hidden;
  text-overflow:ellipsis;/*넘치면...표시*/
}

 

결과

 

아침이 피어나듯이 강아지, 보고, 별 별 거외다. 하나에 별에도 그러나 어머니, 밤이 봅니다. 피어나듯이 이국 이름자 시인의 내린 봅니다. 잠, 하늘에는 봄이 봅니다. 패, 별을 릴케 별이 지나고 하나에 별 하늘에는 가득 거외다. 북간도에 무덤 계절이 했던 없이 애기 있습니다. 파란 이름과, 사랑과 내 어머님, 소녀들의 말 했던 않은 거외다. 했던 지나고 이런 가득 가을 하나에 노루, 말 비둘기, 봅니다. 그리고 소녀들의 하나에 추억과 언덕 속의 새워 있습니다. 밤이 언덕 소학교 까닭이요, 있습니다.

 

 

 

n줄이상 넘어가면 ...표시

 

<p class="line-2">
아침이 피어나듯이 강아지, 보고, 별 별 거외다. 하나에 별에도 그러나 어머니, 밤이 봅니다. 피어나듯이 이국 이름자 시인의 내린 봅니다. 잠, 하늘에는 봄이 봅니다.

패, 별을 릴케 별이 지나고 하나에 별 하늘에는 가득 거외다. 북간도에 무덤 계절이 했던 없이 애기 있습니다. 파란 이름과, 사랑과 내 어머님, 소녀들의 말 했던 않은 거외다. 했던 지나고 이런 가득 가을 하나에 노루, 말 비둘기, 봅니다.

그리고 소녀들의 하나에 추억과 언덕 속의 새워 있습니다. 밤이 언덕 소학교 까닭이요, 있습니다.
</p>

.line-2{
  display:-webkit-box;
  max-width: 200px;
  max-height;30px;
  white-space:normal;
  overflow:hidden;
  -webkit-line-clamp:2;/*보여줄 줄의 수를 정함*/
  -webkit-box-orient:vertical;/*box의 배열 방향을 정함*/
}

 

결과

 

아침이 피어나듯이 강아지, 보고, 별 별 거외다. 하나에 별에도 그러나 어머니, 밤이 봅니다. 피어나듯이 이국 이름자 시인의 내린 봅니다. 잠, 하늘에는 봄이 봅니다. 패, 별을 릴케 별이 지나고 하나에 별 하늘에는 가득 거외다. 북간도에 무덤 계절이 했던 없이 애기 있습니다. 파란 이름과, 사랑과 내 어머님, 소녀들의 말 했던 않은 거외다. 했던 지나고 이런 가득 가을 하나에 노루, 말 비둘기, 봅니다. 그리고 소녀들의 하나에 추억과 언덕 속의 새워 있습니다. 밤이 언덕 소학교 까닭이요, 있습니다.

 

text-overflow 속성

 clip : 넘치는 텍스트는 자름

ellipsis : 잘린 텍스트를 '...'으로 표현해 잘린 텍스트가 있다고 알려줌

 

white-space 속성

• normal: 줄바꿈
• nowrap: 줄바꿈 허용 안함
• pre
• pre-wrap
• pre-line

 

W3school에서 확인

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_white-space