CSS를 사용하여 긴 문장을 말줄임표로 처리하는방법을 공유하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS로 말줄임표넣기</title>
<style>
.ellipsis{width:180px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>
</head>
<body>
<h1>Hello world!</h1>
<h1 class="ellipsis">Hello world!</h1>
</body>
</html>
동일한 <h1>태그안의 문장에 css를 설정하여 정해진 width길이를 넘어가는 글자는 말줄임표로 처리하였습니다.
게시판과 테이블에 유용하게 사용될 수 있습니다.
'CSS > CSS3' 카테고리의 다른 글
| CSS를 이용한 리스트 넘버링 (순수CSS) (0) | 2018.01.25 |
|---|---|
| SVG 파일의 CSS 애니메이션 (0) | 2018.01.24 |