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

본문 바로가기
사이트 내 전체검색


회원로그인

오늘 62
어제 314
최대 618
전체 516,349
마음을 나누는 인터넷 일기장 - 통플 다이어리
Html & Script

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

페이지 정보

작성자 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일19-07-24 15:24 조회561회 댓글0건

본문

출처 : 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:ellipsisdisplay:-webkit-box가 있어야한다.

자세한건 caniuse에서 보시면 됩니다.

추천 0

댓글목록

등록된 댓글이 없습니다.

Html & Script 목록

Total 199건 1 페이지
Html & Script 목록
번호 제목 글쓴이 날짜 조회 추천
공지 유니코드의 명칭과 속성 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-13 40356 38
198 div 순서 변경 (jquery 드래그 방식) nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-04 236 0
197 자바스크립트 javascript number_format nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-30 220 0
열람중 CSS를 말 줄임 방법(text-overflow:ellipsis) 속성 이용 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-24 562 0
195 JAVASCRIPT / JQUERY 를 이용한 ID, NAME, CLASS 값 가져오기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-18 572 0
194 CSS ellipsis nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-11 537 0
193 자동 스크롤 스크립트 댓글1 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-04 902 0
192 css 이미지 일부분만 보여주기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-29 1515 0
191 [jQuery] preventDefault(), stopPropagation() nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22 2150 0
190 소스보기 막기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-22 2741 0
189 (자바스크립트) Base64 인코딩/디코딩 소스(UTF-8 지원) nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-20 2891 0
188 jquery iframe 제어하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-08 2571 0
187 [펌] Web Worker - 웹에서 멀티 쓰레드 구현하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-10 2519 0
186 CSS Text & Viewport units nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20 3053 0
185 자바스크립트 replace / 문자열 변경하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-06 4612 0
184 날짜 및 시간 계산(JavaScript) nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-29 5594 0
183 동적으로 select의 option생성하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 6004 0
182 css ul li 가로 정렬 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-06 5615 0
181 자바스크립트 Attr 속성 추가 ,삭제, 조회하기 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 13791 0
180 오른쪽 마우스 클릭막기, 우클릭금지 nuno 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-29 5799 0
게시물 검색

Copyright © nuno21.net All rights reserved. 상단으로
모바일 버전으로 보기