웹프로그래밍

Global It Leader!!


CSS


 
 

생략 기호 표시하기, 글자 자르기 - 한줄, 여러줄

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 2,805회 작성일 21-02-03 00:22

본문

CSS로 글자 자르기 - 한 줄, 여러 줄


고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다.

한 줄 단위로 글자 자르기

처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다.

출력될 너비 조정하기

CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는 경우에는 이를 너비를 가질 수 있게 변경해야 한다.

CSS
.target {
    display: block;
}

요소를 block 값으로 변경했기에 자동적으로 요소의 너비는 부모 너비의 100%를 차지하도록 변경된다. 만약 inline-block 과 같이 콘텐츠에 따라 유동적인 너비를 가진다면 직접 요소의 너비를 설정해야 한다. 즉, 일정한 고정된 너비를 가지는 것이 전제 조건이다.

CSS
.target {
    display: inline-block;
    width: 200px;
}

줄바꿈을 없애기

너비가 지정된 요소라도 글자수가 해당 너비를 넘어서게 되면 자동으로 줄바꿈이 이루어진다. 이 것은 white-space 속성을 nowrap 으로 설정하여 방지할 수 있다.

CSS
.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
}
변경전나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아
 
변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

넘치는 부분을 감추기

CSS에서 요소를 넘치는 부분을 처리하는 것은 overflow 속성이 담당한다. 대상 요소의 overflow 속성을 hidden 으로 설정하여 넘치는 부분을 화면에서 숨긴다.

CSS
.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

숨긴 부분 처리

위에서 설정한 속성들과 속성값으로 인해 숨겨지게 되는 부분을 처리하는 방식은 text-overflow 속성이 담당하며, ellipsis 를 설정하면 말줄임표(...)가 숨겨지는 영역의 끝에 생성된다(오우~ 굿!).

CSS
.target {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

이상의 내용은 출력될 글자수를 서버단에서 적은 수로 제한하지 않은 경우에는 유동적인 너비에 충분히 대응된다. 다만, 한 줄로 레이아웃이 제한된다는 것에 유념해야 한다.

여러 줄 단위로 글자 자르기

다음으로 적용해 볼 것은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비와 높이에 맞게 여러 줄 단위로 자르는 법이다. 이는 위에서 다룬 내용의 반복과 추가적인 설정이 필요하다.

한 줄 출력의 해제 및 재설정

위의 한 줄 자르기에서 white-space 속성을 이용해서 여러 줄에 걸쳐 출력되는 글자를 한 줄로 출력되게 했었다. 이를 해제하여 다시 여러 줄로 표현되게 해야 한다.

CSS
.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
}
변경후나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

줄 높이의 추가

여러 줄을 출력하기 위해서는 요소의 줄 높이의 설정이 필수다. 이 줄 높이가 기준이 되어 보여주고 싶은 줄의 행수 만큼 요소의 높이를 설정하게 된다.

CSS
.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
}

요소 높이의 추가

위에서 설정한 줄 높이를 기준으로 요소의 높이를 설정한다. 즉, 2줄을 보여주고 싶다면 높이를 줄 높이의 2배로 설정하고 3줄을 보여주고 싶다면 줄 높이의 3배로 설정하면 된다.

CSS
.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
}
변경후
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아

height 대신에 max-height 를 설정해서 최대치만 제한해도 된다.

숨긴 부분 처리 추가

위의 설정으로 여러 줄을 출력하고 글자를 자를 수 있지만 text-overflow 속성으로 숨긴 부분에 대한 처리가 되질 않는다. 여러 줄에 걸친 숨긴 처리는 현재 웹킷 계열의 브라우저에서만 지원하는 속성으로 아래와 같다.

CSS
.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
변경후
나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄 이런 전차로 어린 백셩이 니르고져 홇베이셔도 마참네 제 뜨들 시러펴디 몯핧 노미하니아
  • text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로
  • word-wrap: break-word : 잘라버릴 글자를 단어 단위로
  • display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환
  • -webkit-line-clamp: 3 : 보여줄 줄 갯수
  • -webkit-box-orient: vertical : 플렉스 박스의 방향 설정

다시 말하자면, 크롬이나 오페라, 사파리 같은 웹킷 계열의 브라우저는 여러 줄의 글자를 자르는 자신만의 방법을 제공하고 있기에 높이나 줄 높이 설정이 필요치 않는다. 다만 크로스브라우징을 위해서 필요할 뿐이다.



출처: https://webdir.tistory.com/483 [WEBDIR] 

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
72 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 374 07-31
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 578 04-09
70 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 896 09-01
69 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1717 04-24
68 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2883 04-24
67 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1223 03-28
66 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2577 03-26
65 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1230 03-26
64 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1227 03-25
63 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1261 03-18
62 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7821 11-28
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1685 09-20
60 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1840 08-23
59 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2135 06-07
58 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2596 05-20
57 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2396 04-08
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2806 02-03
55 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2380 12-19
54 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2520 11-02
53 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2591 10-25