• 목록

<div class="cut-str">
	글자가 너무 길어요!
</div>

.cut-str {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

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

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