1 2 3 4 5 6 L

Page Header > Subtitle

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;
}
변경후나랏말싸미 듕귁에 달아 ...
0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

HTML/CSS

번호 제목 글쓴이 날짜 조회수
8 [CSS] nth-child (n번째 부터 n번째 까지 css적용) 미도어묵 11-24 881
7 유튜브 동영상 반응형으로 넣기 미도어묵 09-11 638
6 HTML5에서 다른 frame의 문서에 속한 객체 접근 방법 미도어묵 07-29 629
5 table등의 null 값에 특정값 삽입 css 미도어묵 12-29 304
4 CSS로 글자 자르기 - 한 줄, 여러 줄 관리자 05-22 317
3 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 관리자 05-22 324
2 날짜와 시간 입력을 도와주는 데이트 피커 15가지 관리자 04-25 396
1 버튼디자인 및 오버효과를 간편하게 줄수있는 bttn.css 관리자 04-25 278