Minwoo Dev.

[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기 본문

Web

[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기

itisminu 2023. 12. 9. 18:19
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