말줄임표: ellipsis

오늘은 일정 글자수 이상 넘어가면 말줄임표(...) css에 대해 정리해보겠습니다.

 

 

1. 공통으로 import 해서 쓸 css 요소 정리

export const getEllipsisStyles = (lines = 2): CSSProperties => {
 overflow: "hidden",
 textOverflow: "ellipsis",
 display: "-webkit-box",
 WebkitLineClamp: lines,
 WebkitBoxOrient: "vertical",
 wordBreak: "break-word" as any,
}

 

- overflow: "hidden"; 박스에서 넘쳐난 텍스트 숨기기

-textOverflow: "ellipsis"; 텍스트가 잘릴 때 말줄임표(...)를 표시함

- display: "-webkit-box"; 요소를 CSS 박스 모델의 특별한 형태로 표시

- WebkitLineClamp: lines; 텍스트를 표시할 최대 줄 수를 지정함(line 값이 2)

- WebkitBoxOrient: "vertical"; 박스 내의 콘텐츠 방향을 세로로 결정함

- work-break: break-all; 어절이 유지되지 않고 끊어져서 줄바꿈 됨

 

 

2. import 해서 가져다가 쓸 때

// import 해서 쓸 때,
<Text
	as="p"
	font={isMobile ? "tag1M" : "captionM"}
	color={vars.brand.default}
	style={getEllipsisStyles(2)}>