line-clamp 속성

line-clamp 속성

   .two-line-text {
   display: -webkit-box; /* Flex 컨테이너처럼 동작 */
   -webkit-box-orient: vertical; /* 축 방향 설정 */
   overflow: hidden; /* 넘치는 텍스트 숨김 */
   -webkit-line-clamp: 2; /* 최대 2줄 표시 */
   line-height: 1.5; /* 줄 간격 조정 */
   max-height: calc(1.5em * 2); /* 총 2줄 높이 */
   text-overflow: ellipsis; /* 말줄임표 추가 */
}

※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!

daily-inklings 전체 글 보기

이글은 11월 21, 2024 에 최종으로 업데이트된 글입니다.

댓글