css 긴 문장 ... 으로 처리하기

안녕하세요 비버팩토리입니다.

문장이 2줄 3줄씩 길게 나오면 ... 으로 처리 방법을 설명 해봅니다.

 

우선 아래 자료 참고하면됩니다.

 

 

글자 라인이 적을 경우 아래 css 참고하면 됩니다.

대신에 width는 퍼센트로 하면 됩니다. px는 사이즈가 고정적으로 줄여서 나와서 반대로 퍼센트는 양쪽으로 골고루 보이기엔 퍼센트가 낫습니다. (상황에 맞게 처리하세요)

 .txt_line {
      width:70%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
  }

 

 

멀티 사이즈로 할땐 아래 css 참고하면 됩니다.

.txt_post {
      display: -webkit-box;
      display: -ms-flexbox;
      display: box;
      margin:30px 0;
      max-height:80px;
      overflow:hidden;
      vertical-align:top;
      text-overflow: ellipsis;
      word-break:break-all;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3
  }

 

 

여기서 추가 설명하자면 -webkit-line-clamp:1 으로 하면 한줄로 나오는데 width 비율이 필요합니다. 100 % 혹은 빼주셔도 됩니다. (상황에 따라서... 빼거나 추가하면됩니다.)

 

max-height:는 2줄이나 3줄을 맞출때 최대 사이즈를 비율 주면 딱 맞춰서 나옵니다. 2줄일땐 30px가 적당해보입니다.

 

margin은 위 아래 비율을 줄때 마진이 낫구요 패딩을 줬을땐 오버플로우로 감싸진 부분이 보여서 마진으로 처리를 하면됩니다.

 

 

 

 

 

참고 자료 

 

https://jos39.tistory.com/211

'...'을 CSS에서 처리하는 방법 - text-overflow:ellipsis