보통 비디오의 제목이나, 상품의 이름 같은 경우 디자인적으로 정한 길이가 넘어가면 넘치는 내용을 자르고 잘렸다는 표시로 '...' 등을 붙입니다.
이는 웹킷브라우저에서는 스타일시트만으로 제어가 가능하지만, 우리의 익스플로러는 역시 허락하지 않습니다.

우선 스타일시트로 제어하는 걸 살펴봅시다.
웹킷 계열에서는 이를 이미 css로 완벽하게 구현하였습니다.

한 줄 말줄임

한 줄은 IE에서도 가능합니다.

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

텍스트가 영역을 벗어나면 말줄임이 떠야하니까 넘치는 부분들이 일단 가려져야겠죠. 그래서 overflow:hidden으로 막아줍니다.
넘치는 부분의 처리를 "..."으로 하기위해 text-overflow설정을 해주고,
영역이 한 줄로 넘치는 상황을 만들기 위해 줄바꿈을 하지 않는다는 뜻의 nowrap값을 설정합니다.

두 줄 말줄임

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5em;
  max-height: 3em;

웹킷 계열에서는 display 속성에 box라는 것이 있습니다.
방향성을 수직으로 하고 원하는 줄 수를 설정해 줍니다.
텍스트는 height 값이 아니라 line-height으로 높이가 결정되니 이것을 정했다면, 줄 수만큼 곱해서 max-height 값을 설정해 줍니다.

예제보기 ↓

크로스 브라우징 대안

잘 만들어진 플러그인 사용을 추천드립니다^^;
제가 아직 사용해 본 건 아니지만 괜찮은 거 같아서 소개해드립니다.

multi-clamp 바로가기