css를-말-줄임-방법text-overflowellipsis-속성-이용

CSS를 말 줄임 방법(text-overflow:ellipsis) 속성 이용

페이지 정보

작성자 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

작성일 2019.07.24 15:24

본문

출처 : https://goodleedw.blog.me/221465664525

정의 및 이용방법

text-overflow 속성은 표시되지 않는 오버플로 된 콘텐츠를 사용자에게 알려야하는 방법을 지정합니다. 잘라내거나 줄임표 (...)를 표시하거나 사용자 정의 문자열을 표시 할 수 있습니다.

텍스트 오버플로에는 다음 속성이 모두 필요합니다.

* white-space: nowrap;

* overflow: hidden;

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; //줄바꿈 안되게 함
}

IE6,IE7, Opera / iE8,IE9 / Chrome, Firefox 이렇게 동일하게 보여졌습니다.

IE8에서 고딕체 국문과 영문은 각각 다르게 보여졌습니다.

여러줄 처리

{
 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에서 보시면 됩니다.

페이지 정보

본문

관련자료