2018.11.13 19:10

CSS 말줄임 처리하기

조회 수 430 추천 수 0 댓글 0

일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글자수를 특정지어서 자르는 방법을 많이 사용합니다.

헌데 이방법을 사용할시 영어, 숫자, 한글의 자간이 달라 일관되지 않는 모습을 보이는 경우가 많아서

뷰 단계에서 글자가 넘어갈경우 말줄임표를 처리하는 방법을 찾아보았습니다.

 

[CSS 작성]

text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
width:100px;
overflow:hidden;

text-overflow:
이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할것인지를 선택하는 속성입니다.

clip : 기본값입니다.
ellipsis : 말줄임표로 처리합니다. 상위요소의 너비가 auto로 되어있는경우는 적용할 수 없습니다.
inherit : 상위요소의 속성과 동일하게 사용합니다.

 

white-space:
요소안에서 공백은 어떤식으로 처리할것인지를 선택하는 속성입니다.  공백은 줄바꿈(line-break), 들여쓰기(tab), 공백(space)입니다.

normal : 기본값입니다. 공백을 여러개 넣어도 공백을 1개로 처리합니다.
nowrap : 공백을 여러개 넣어도 1개로 처리합니다. 텍스트가 길어져도 줄바꿈을 하지않고 1줄로 표시합니다.
pre : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없으면 줄바꿈을 실행하지 않습니다.
pre-wrap : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다.
pre-line : 공백을 여러개 넣어도 1개로 처리합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다. 코드에 줄바꿈이 있을때도 그대로 실행합니다.

 

word-wrap:
긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성입니다. (overflow 와 비슷합니다)

normal : 기본값입니다. 글자가 길어도 끊어지지 않고 한줄에 계속 표시
break-word : 강제로 끊어서 줄바꿈합니다.

 

위와 같은 방법은 텍스트를 한줄로만 표현할때 사용하는 방법입니다.

아래는 두줄이상의 텍스트일경우 말줄임 처리 방법입니다.

 

[두줄 이상일 경우 CSS 작성]

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.7em;
height: 8.5em; /* line-height 가 1.5em 이고 5라인을 자르기 때문에 height는 1.7em * 5 = 8.5em */

-webkit-line-clamp 속성의 경우, 웹킷 엔진을 사용하지 않는 브라우져(익스플로러)의 경우 문제가 될수 있으므로,

line-height 속성과 height 속성을 이용하여 높이를 계산하여 넣어줍니다. (height = line-height * 줄수)

img_079 .jpg

TAG •
    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 811
56 테이블(셀) 깨지지 않는 CSS 1 팔공산 2008.07.12 8467
55 태그의 상세분류 팔공산 2008.04.04 4843
54 커서(cursor) 모양 정리 file 팔공산 2018.07.19 121
53 즐겨찾기 스크립트 1 팔공산 2008.02.21 5180
52 제발...alt텍스트와 title텍스트를 구분해조바바 1 팔공산 2008.04.04 6691
51 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1 팔공산 2008.07.12 7331
50 자신의 홈에 프린트버튼을 넣자 2 팔공산 2008.07.12 6948
49 익스6에서만 작동되게하는 css구문 팔공산 2009.02.19 9833
48 이미지 없이 라운드 박스 만들기 팔공산 2008.04.04 4134
47 이미지 없이 그라데이션효과 주기 팔공산 2008.07.12 8169
46 이미지 바꾸기 소스 1 감로수 2009.06.06 10222
45 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 254
44 실시간 환율조회 html file 팔공산 2017.04.18 922
43 사각박스 코너를 이미지없이 둥글게 만드는법 file 팔공산 2008.04.08 8138
42 붙어야 할 이미지가 붙지 않을때. file 팔공산 2008.04.19 7328
41 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1428
40 반응형 CSS 테이블 file 팔공산 2017.06.13 708
39 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1560
38 마퀴태그의 기본 팔공산 2010.02.06 9726
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...