[CSS] 가로,세로 말 줄임표(...) 처리

1.가로 말 줄임표.

 

- 주의 사항)

 * block 형태의 요소여야 하며 해당요소 or 텍스트를 감싸고있는 요소의 부모요소의 width값이 지정된 형태여야 작동.

 * 자동 줄바꿈을 허용하지 않는 white-space: nowrap 속성과 값은 반드시 입력해야함.

 

-HTML

<p class="text">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

-CSS

.text {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

 

 

2.세로 말 줄임표.

- 주의 사항)

 * 크로스 브라우징 이슈가 있음. 벤더프리픽스 -webkit- 계열의 브라우저에서만 지원하는 속성을 사용.

 * IE에선 지원이 안됨 (22년 6월 서비스 종료 예정)

 * IE에서도 비슷한 동작을 위하여 max-height속성과 overflow:hidden 속성,값을 사용 할 것

 

-HTML

<p class="text">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<p>

 

-CSS

.text {
   width: 33%;
   line-height: 1.3;
   max-height: 3.6rem;
   overflow: hidden /* IE에서 세로로 잘리기 위한 처리 */
   display: -webkit-box;
  -webkit-line-clamp: 3; /* 몇줄일때 자를건지 선택 가능한 속성 */
  -webkit-box-orient: vertical
}