티스토리 뷰
안녕하세요! 오늘은 CSS를 활용하여 말줄임 표시를 넣는 방법에 대해서 설명해 보도록 하겠습니다. 웹페이지 작업을 하다 보면 말줄임(...)이 필요한 상황이 생깁니다. 말줄임을 통해서 해당 콘텐츠의 길이가 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다. 아래 CSS를 이해하시면 앞으로 효율적이고 더 포 넓은 활용이 가능해질 것입니다.
1. 한줄로 된 콘텐츠에서 말줄임(...) 표시하기
CSS의 text-overflow 속성을 사용하여 텍스트에 말줄임표(ellipsis)를 표시할 수 있습니다. 이를 위해 필요한 CSS 속성은 다음과 같습니다.
- display : block or inline-block
- white-space: nowrap; : 텍스트를 한 줄로 표시합니다.
- overflow: hidden; : 넘치는 텍스트를 숨깁니다.
- text-overflow: ellipsis; : 넘치는 텍스트를 말줄임표로 표시합니다.
가장 먼저 할 일은 컨텐츠 요소를 블록요소(display: block or inline-block) 바꿔주는 일입니다. text-overflow: ellipsis은 일정 너비를 넘어가면 해당 컨텐츠를 말줄이표로 줄여버리는 효과를 가져오기 때문에 콘텐츠가 인라인 요소라면 너비를 가질 수 없어 text-overflow: ellipsis가 적용되지 않게 됩니다. 따라서 콘텐츠를 블록요소로 만들어주는 것과 보여주고 싶은 만큼 width를 설정하는 것이 필수적입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellipsis {
width: 200px; /* 보여주고 싶은 만큼 너비 고정 */
white-space: nowrap; /* 컨텐츠가 한줄로 유지되도록 만들기 */
overflow: hidden; /* 너비를 넘아가면 숨김처리 */
text-overflow: ellipsis; /* 너비를 넘어가면 말줄임표시(...)*/
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
}
</style>
</head>
<body>
<div class="ellipsis">
한줄로 된 말줄임표시는 이렇게 만드는 것입니다. 어때요?
</div>
</body>
</html>한 줄 말줄임표시의 예제입니다. 위 코드를 복사하여 사용하시면 됩니다. "ellipsis라는 클래스를 만들어 원하는 콘텐츠에 클래스만 적용해주면 한줄로 말줄임 표시가 가능합니다.
2. 여러 줄로 된 콘텐츠에서 말줄임(...) 표시하기
여러 줄에서 말줄임표를 표시하려면 -webkit-line-clamp CSS 속성을 사용할 수 있습니다. 이 속성은 웹킷 기반 브라우저에서만 지원되므로, 다른 브라우저를 지원하려면 추가적인 JavaScript 처리가 필요할 수 있습니다.
- display : block or inline-block
white-space: nowrap; : 텍스트를 한 줄로 표시합니다.- overflow: hidden; : 넘치는 텍스트를 숨깁니다.
- text-overflow: ellipsis; : 넘치는 텍스트를 말줄임표로 표시합니다.
- -webkit-line-clamp: 3; : 텍스트가 몇 줄이 넘었을 때 말줄임표를 표시할지 설정합니다.
한 줄로 표시할 필요 없이 여러 줄이 되어도 가능하므로 white-space: nowrap;은 사용하지 말아야 합니다. 다만 webkit-line-clamp: 3; 를 사용하여 높이로 몇 번째 줄까지 보여줄 것인지를 표시해 줄 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.multiline-ellipsis {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.padding{
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="padding">
<span class="multiline-ellipsis">여러줄로 된 말줄임표시는 이렇게 만드는 것입니다. 여기서부터는 더미텍스트 공무원인 근로자는 법률이 정하는 자에 한하여 단결권·단체교섭권 및 단체행동권을 가진다. 한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.</span>
</div>
</body>
</html>위 예제에서는 .multiline-ellipsis 클래스를 사용하여 여러 줄에서 말줄임표가 적용된 텍스트 컨테이너를 정의했습니다. -webkit-line-clamp 속성은 텍스트가 몇 줄이 넘었을 때 말줄임표를 표시할지 설정합니다. 이 속성은 웹킷 기반 브라우저(Chrome, Safari 등)에서만 지원되며, 다른 브라우저에서는 작동하지 않을 수 있습니다. 현재로서는 표준 CSS에서 여러 줄 말줄임을 지원하지 않으므로, 완벽한 호환성을 위해서는 JavaScript를 사용한 추가 처리가 필요할 수 있습니다.
오늘은 text-overflow: ellipsis 속성을 사용하여 CSS에서 말줄임표시를 처리하는 방법에 대해 알아보았는데요. 저도 자주 사용하는 방법이고 웹 작업하시는 분들이 꼭 아라두면 좋은 지식인 것 같습니다. 저도 매번 잊어버리는 일 많아서 이렇게 포스팅을 하면서 한번 더 공부하게 되네요! 그럼 다음에 또 좋은 꿀팁 가져오겠습니다.