CSS를 말 줄임 방법(text-overflow:ellipsis) 속성 이용
컨텐츠 정보
- 19,585 조회
- 0 추천
- 목록
본문
CSS Syntax
text-overflow: clip|ellipsis|string|initial|inherit;
값 | 설명 |
clip | 기본 값이며, 텍스트를 자를 수 없다. |
ellipsis | 잘린 텍스트를 줄임표 ("...")로 나타낸다. |
string | 클립 된 텍스트를 나타내기 위해 주어진 문자열을 렌더링한다. |
한줄처리
div {
width:200px;
height:20px;
text-overflow:ellipsis; (...처리)
overflow:hidden; // 글자 넘치는 것을 자름
white-space:nowrap; //줄바꿈 안되게 함
}
여러줄 처리
{
max-height:54px; // 보여줄 높이까지(3줄의 높이를 입력해야한다)
word-wrap:break-word //잘라버릴 글자 단어 단위로 만들어준다)
display:block;
display:-webkit-box;
-webkit-line-clamp:3; //보여줄 줄 갯수
-webkit-box-orient:vertical; //박스의 방향 설정
overflow:hidden;
text-overflow:ellipsis;
}
이 여러줄(line-clamp)은 모든 브라우저에서 지원되지 않는다.
line-clamp를 사용하기 위해서는 text-overflow:ellipsis와 display:-webkit-box가 있어야한다.
자세한건 caniuse에서 보시면 됩니다.
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.
