[CSS]글자가 영역밖으로 넘어갔을 때 text-overflow

text-overflow를 적용하기 위해서는 

 

overflow : hideen(영역보다 길어지면 영역을 넘어가는 부분을 숨긴다.) / scroll(항상 스크롤)/ auto(영역보다 길어지면 자동으로 스크롤 만든다);

white-space : nowrap; (텍스트 줄바꿈이 되지않음) 

위의 두가지 값이 지정된 값일 경우에만 적용된다. 

 

 

clip의 경우 크기에 맞게 잘라버리고

ellipsis의 경우 "..."을 넣어서 자른다. 

 

보통 overflow 값이 scroll이나 auto 일경우 스크롤이 생기지만 (텍스트가 길경우) 

text-overflow와 함께 적용하면 텍스트가 잘리기때문에 auto의 경우 영역을 넘어가지 않는것과 같아 스크롤이 생기지 않고

scroll의 경우에는 무조건 스크롤이 생기기 때문에 스크롤이 생기지만, 잘린 글자는 보이지 않는다.

 

p{
  width: 200px; 
  white-space:nowrap;
}
p.p1{
  overflow: hidden;
  text-overflow: clip;
}
p.p2{
  overflow: auto;
  text-overflow: clip;
}
p.p3{
  overflow: hidden;
  text-overflow: ellipsis;
}
p.p4{
  overflow: scroll;
  text-overflow: ellipsis;
}

 

 

여러줄을 원하는 경우

[CSS/CSS 기초] - 글자 영역 밖으로 벗어나면 자르기

[CSS/CSS 기초] - [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지)