CSS로 자동 말줄임 처리


<p style="
  width: 250px;
  line-height: 220%;
  font-size: 12px;
  color: #555555;
  margin: 0;
  font-family: Arial;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
">
나랏말싸미 듕귁에 달아 문짜와로 서르 사맛디 아니할쌔, 이렁 전차로 어린 백셩이 니르고져 홀 배 이셔도 마찬내 제 뜨들 시러 펴디 몯할 노미 하니라. 내 이랄 위하야 어엿비 너겨 새로 스믈여듧 자랄 맹가노니, 사람마다 해여 수비 니겨 날로 쑤메 편안킈 하고져 할 따라미니라.
</p>

<p style="

width: 250px;

line-height: 220%;

font-size: 12px;

color: #555555;

margin: 0;

font-family: Arial;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

나랏말싸미 듕귁에 달아 문짜와로 서르 사맛디 아니할쌔, 이렁 전차로 어린 백셩이 니르고져 홀 배 이셔도 마찬내 제 뜨들 시러 펴디 몯할 노미 하니라. 내 이랄 위하야 어엿비 너겨 새로 스믈여듧 자랄 맹가노니, 사람마다 해여 수비 니겨 날로 쑤메 편안킈 하고져 할 따라미니라.

</p>

결과

나랏말싸미 듕귁에 달아 문짜와로 서르 사맛디 아니할쌔…

중요한 포인트

width 필수
- 없으면 안 잘림
white-space: nowrap
- 줄바꿈 금지 → 한 줄 유지
overflow: hidden
- 넘치는 부분 숨김
text-overflow: ellipsis
- … 표시