본문 바로가기
프로그래밍/HTML, CSS, JavaScript

CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow

by [바가지] 2018. 5. 27.
반응형

CSS문자열자르기

 

CSS를 이용하여 간단하게 문자열을 자르는 방법에 대하여 알아 보겠습니다.

목록 화면 등에서 제목을 자르는 용도로 사용하면 좋을 것 같습니다.

영역을 설정하고 그 영역에서 벗어날 경우, 내용을 자르고 생략부호를 추가하여 표시되도록 하는 방법입니다.

 

예제

<!DOCTYPE html>
<html>
<head>
  <title>번호 없는 리스트 예제</title>

  <style>
     p.title {
                white-space: nowrap;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
     }

  </style>

</head>
  <p class="title">문자열 자르기 테스트 입니다.</p>
</html> 

 

예제 결과

결과

 

예제 CSS 속성값 설명

- white-space : nowrap 

  •   줄바꿈이 실행되지 않도록 합니다. 

 

- width: 200px

  •  너비를 지정합니다.

 

- overflow: hidden

  •   설정 영역을 넘었을 경우 숨김 처리 합니다.

 

- text-overflow: ellipsis

  •   영역을 넘을 경우 생략부호(...) 를 사용하여 생략처리 하여 넘지 않도록 합니다.

 

 

기타 속성값 알아보기

white-space

  • normal → 기본값, 자동 줄바꿈
  • pre → 줄바꿈과 기타 공백을 유지 <pre>태그 효과
  • pre-line → (앞)공백을 유지하지 않으며, 영역에서 벗어 날 경우 자동 줄바꿈이 발생 함.
  • pre-wrap → pre속성값과 동일하나, 영역에서 벗어 날 경우 자동 줄바꿈이 발생 함.
  • inherit → 부모값상속

 

- overflow

  • auto → 영영보다 클 경우 스크롤 발생, 작으면 발생하지 않음.
  • scroll → 영역보다 큰 영역만큼 스크롤이 발생 함. 
  • visible → 기본값, 영역에 영향을 받지 않고 보여줌

 

- text-overflow

  • clip → 자르기

 

반응형