css로 글자길이에 따라 글자 생략하기

css를 이용하여 긴 글자를 자르는 법을 알아보자!
먼저 html은 대충 만들어준다.

<div class='cut-letter'>
	너무 긴 글자는 잘립니다. 참고해주세요.
</div>

 

그리고 css를 다음과 같이 먹여준다.

.cut-letter {
  text-overflow: ellipsis;
  /* text-overflow: clip; */
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

 

그러면 width를 넘는 긴 글자가 •••으로 나타난다.

text-overflow 속성을 ellipsis가 아닌 clip으로 지정하면 글자가 잘리게 된다.
또한 scroll을 방지하기 위해 overflow 속성을 hidden으로 주고,
개행되지 않도록 white-space 속성을 nowrap으로 설정해야 한다.

 

코드는 jsfiddle에서 확인할 수 있다.!