2019년 9월 26일 목요일

html 요소의 width를 벋어나는 문자열을 css로 자르기

<!-- div의 span에 아래의 스타일을 적용한다. -->
<!-- 한줄 처리 -->
div span{
 width:100%;
 overflow:hidden;
 text-overflow:ellipsis; /* 잘려진 문자열 뒤에 ... 붙이기 */
 white-space:nowrap; /* 줄바꿈이 일어나지 않음 */
}
<!-- 한줄 처리 -->
div span{
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 라인수
  -webkit-box-orient: vertical
}