미누에요
[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기 본문
728x90
반응형
SMALL
글의 양이 많을 경우에 ... 을 사용하여 생략하여 나타내는 경우가 있다.
예를 들면
코끼리는 코가 손이다.
↓
코끼리는 ...
위와 같은 방식으로 말이다.
이런 표현방식을 HTML/CSS에서도 할 수 있다.
text-overflow
text-overflow는 white-space를 이용해 줄바꿈을 하지 않는 경우에 넘치는 텍스트를 어떻게 처리할 지 설정한다.
속성값에는 clip과 ellipsis가 있다.
clip
clip 속성값은 넘치는 텍스트를 잘라버린다.
ellipsis
ellipsis 속성값은 ... 과 같은 말 줄임표로 잘린 텍스트를 대체한다.
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>testfile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="first">
현지시각으로 8일 워싱턴포스트, 뉴욕타임스 등 주요 외신에 따르면 유럽연합 집행위원회(EC)와 유럽의회, EU 27개 회원국 대표는 37시간이 넘는 마라톤 회의 끝에 'AI 규제법'(AI Act)에 합의했습니다.
</div>
<div class="second">
현지시각으로 8일 워싱턴포스트, 뉴욕타임스 등 주요 외신에 따르면 유럽연합 집행위원회(EC)와 유럽의회, EU 27개 회원국 대표는 37시간이 넘는 마라톤 회의 끝에 'AI 규제법'(AI Act)에 합의했습니다.
</div>
</body>
style.css
div{
margin-top: 20px;
width: 50%;
border: 1px solid #000;
}
.first{
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.second{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
overflow : hidden 은 넘치는 부분을 가린다.
white-space : nowrap은 줄바꿈이 없어진다.
border은 div로 나눠준 구역의 테두리를 표시하는 것이다.
결과
clip을 사용한 부분은 글자가 정해진 영역을 넘어가면 그냥 잘렸고, ellipsis를 사용한 부분은 글자가 정해진 영역을 넘어가면서 ... 을 붙여 표시한 것을 볼 수 있다.
이처럼 글에서 생략을 표시할 때, 유용하게 사용되는 것이 text-overflow이다.
728x90
반응형
LIST
'Web' 카테고리의 다른 글
| [HTML/CSS] CSS 결합자 (CSS Combinters) (0) | 2023.12.14 |
|---|---|
| [HTML/CSS] CSS 선택자 (CSS Selector) (0) | 2023.12.13 |
| [HTML/CSS] display : inline | inline-block | block | flex (2) | 2023.12.03 |
| [HTML/CSS] 가상 요소(Pseudo-Element), ::before, ::after (2) | 2023.12.02 |
| CSS 기본 속성 (2) | 2023.12.02 |
'Web' Related Articles
more
