CSS ) 글, 텍스트줄이기, 말줄임, 생략 ... 두줄 이상일때

한줄 일때!

text-overflow: ellipsis; /*넘치는 텍스트를 생략해줌*/
overflow: hidden; /* 이거안해주면 넘치겠지!*/
white-space: nowrap; /* 줄바뀜이 일어나지않음.*/

출처 : https://webisfree.com/2015-08-17/[css]-text-overflow-%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80-%EB%A7%8E%EC%9D%80-%EA%B2%BD%EC%9A%B0-%EC%83%9D%EB%9E%B5%EA%B8%B0%ED%98%B8%EB%A1%9C-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0

yeolco.tistory.com/151

css로 텍스트 ... 처리하기 - 고정, 가변 길이 element

---

두줄이상일 때

width: 100%;
height: 2.6rem; /* 높이나 가로를 정해야 적용됨*/
overflow: hidden; /* 넘치는건 보이지 않게 해주지!*/
white-space: normal; /* 줄바뀜이 일어남*/
text-overflow: ellipsis; /* 생략기호 ... 를 나타나게해줌*/
display: -webkit-box; /* display를 이렇게해줘야 가능해짐, 대신 ie에선 안먹겠지..ㅠ*/
-webkit-line-clamp: 2; /* 몇줄까지 보여줄건지*/
-webkit-box-orient: vertical; /*비표준이라 함 확인 잘못했으니 살펴보고 쓸것*/

    -webkit-line-clamp 공식문서 : developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp

css-tricks.com/almanac/properties/l/line-clamp/

line-clamp | CSS-Tricks