[CSS] 글자 수가 많아지면 ...으로 표시

 <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div>

.txt_line {
  width:70px;
  padding:0 5px;
  overflow:hidden;
  text-overflow:ellipsis;	// 글자 수가 width 범위를 넘어가면 생략부호로 표시
  white-space:nowrap;	// 공백 1개만 표시, 한 줄에 모두 표시(줄바꿈 X)
  }

white-space

• normal(기본값) : 공백이 여러 개여도 하나만 표시, 자동 줄바꿈
• nowrap : 공백이 여러 개여도 하나만 표시, 줄바꿈 X
• pre : 공백 모두 표시, 줄바꿈 X
• pre-wrap : 공백 모두 표시, 자동 줄바꿈
• pre-line : 공백 모두 표시, 자동 줄바꿈

 

출처: https://jos39.tistory.com/211 [JOS39 블로그]

       https://aboooks.tistory.com/187