반응형
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 → 자르기
반응형
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[HTML/CSS] 텍스트 그림자 효과 꾸미기 (4) | 2018.06.19 |
---|---|
[HTML/CSS] 카테고리 DIV 박스 만들기 (2) | 2018.06.17 |
DIV 배경이미지 변경하기 / CSS 배경설정 자바스크립트로 제어하기 (9) | 2018.05.26 |
자바스크립트 배열의 선언 및 사용법 예제 (10) | 2018.04.24 |
자바스크립트 배열(array)이란 무엇인가? (0) | 2018.04.23 |