다음과 같이 할 수 있다.
코드내용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Text Ellipsis</title>
<style type="text/css">
div{
border:3px solid black;
}
.ellipsis{
white-space : nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur possimus molestias dolor unde, neque, et quos dolorem optio ex.
</div>
</body>
</html>
포인트는 ellipsis 클래스로 설정한 부분이다.
white-space, overflow, text-overflow 삼총사를 묶어서 글자 줄임표를 표시할 수 있다.
반응형
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| 이미지 끼리 여백없이 붙이기 위한 방법 img {display:block;} (0) | 2020.09.19 |
|---|---|
| 태블릿 UI 만드는 스타일 팁, 동적으로 너비가 변하는 레이아웃 margin-right padding-right (0) | 2020.09.19 |
| 버튼 토글로 메뉴 보이기 숨기기 하는 방법 checked 속성 사용 (0) | 2020.09.19 |
| ATOM 단축키 (0) | 2020.09.19 |
| 자잘한 이미지를 뭉쳐서 스프라이트 이미지로 만들고 배경으로 지정하는 CSS (0) | 2020.09.19 |
댓글