CSS를 사용하여 텍스트 길이를 n줄로 제한하는 방법
2024-07-27
white-space 속성 사용:
.text-limit {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 2 * 1.5rem; /* n줄의 높이 설정 */
}
white-space: nowrap는 텍스트가 한 줄에 모두 표시되도록 하며,overflow: hidden은 텍스트가 컨테이너를 넘어가는 것을 숨깁니다.text-overflow: ellipsis는 텍스트 끝에 "..."를 추가하여 생략되었음을 표시합니다.height속성은 컨테이너의 높이를 설정하여 n줄의 텍스트만 표시되도록 합니다. 여기서는 예시로 2줄의 높이를 설정했지만, 원하는 줄 수에 맞게 조정해야 합니다.
display 속성 사용:
.text-limit {
display: -webkit-box;
-webkit-line-clamp: n; /* n줄 표시 */
-webkit-box-orient: vertical;
}
- 이 방법은 웹킷 기반 브라우저(Chrome, Safari 등)에서만 작동합니다.
display: -webkit-box는 컨테이너를 블록 요소로 설정합니다.-webkit-line-clamp: n은 컨테이너에 표시될 텍스트 줄 수를 n으로 설정합니다.-webkit-box-orient: vertical은 텍스트가 세로 방향으로 표시되도록 합니다.
clamp 함수 사용 (최신 CSS):
.text-limit {
display: block;
height: clamp(2 * 1.5rem, /* n줄의 높이 설정 */
content-fit,
inherit);
overflow: hidden;
}
clamp함수는 세 개의 값을 받아 그 중 가장 큰 값을 반환합니다.- 이 방법은 최신 CSS를 지원하는 브라우저에서만 작동합니다.
height속성에서clamp함수를 사용하여 컨테이너의 높이를 n줄의 높이, 컨테이너 내용의 높이, 상속된 높이 중 가장 큰 값으로 설정합니다.
참고:
- 위의 방법들은 텍스트가 실제로 n줄로 잘려지는 것을 보장하지 않습니다. 텍스트의 글꼴 크기, 행 높이, 여백 등에 따라 실제 표시되는 텍스트 줄 수가 다를 수 있습니다.
- 더 정확한 제어를 위해서는 JavaScript를 사용하는 방법도 있습니다.
CSS 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 길이 제한</title>
<style>
.text-limit {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 2 * 1.5rem; /* 2줄의 높이 설정 */
}
</style>
</head>
<body>
<div class="text-limit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non enim leo, at bibendum risus dictum. Nullam ut purus arcu, nec ultricies eros. Maecenas sit amet tortor vitae orci congue tincidunt. Morbi euismod, orci sit amet consectetur luctus, mauris nunc aliquet lectus, sit amet ullamcorper nibh lorem sed velit.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 길이 제한</title>
<style>
.text-limit {
display: -webkit-box;
-webkit-line-clamp: 2; /* 2줄 표시 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="text-limit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non enim leo, at bibendum risus dictum. Nullam ut purus arcu, nec ultricies eros. Maecenas sit amet tortor vitae orci congue tincidunt. Morbi euismod, orci sit amet consectetur luctus, mauris nunc aliquet lectus, sit amet ullamcorper nibh lorem sed velit.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 길이 제한</title>
<style>
.text-limit {
display: block;
height: clamp(2 * 1.5rem, /* 2줄의 높이 설정 */
content-fit,
inherit);
overflow: hidden;
}
</style>
</head>
<body>
<div class="text-limit">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit libero, eget laoreet orci tincidunt at. Nullam a urna lorem, quis mattis lorem congue. Nam a augue quam, vel hendrerit elit consectetur in. Etiam at arcu velit, sit amet tincidunt tellus bibendum. Praesent vel ante vitae neque pulvinar elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
CSS를 사용하지 않고 텍스트 길이를 제한하는 방법
JavaScript 사용:
function limitText(element, maxLength) {
if (element.textContent.length > maxLength) {
element.textContent = element.textContent.substring(0, maxLength) + "...";
}
}
const textElement = document.getElementById('text-limit');
limitText(textElement, 50); // 50자로 제한
- 위 코드는
limitText함수를 사용하여 텍스트 길이를 제한합니다. element매개변수는 제한할 텍스트를 포함하는 HTML 요소를 나타냅니다.maxLength매개변수는 최대 표시할 텍스트 길이를 나타냅니다.substring메서드는 문자열의 일부를 추출하는 데 사용됩니다.textContent속성은 요소의 텍스트 콘텐츠를 가져오거나 설정하는 데 사용됩니다.
서버 측 처리:
- 서버 측에서 텍스트를 처리하여 원하는 길이로 잘라서 클라이언트에게 전달할 수 있습니다.
- 이 방법은 서버 측 프로그래밍 언어(PHP, Python, Java 등)에 대한 지식이 필요합니다.
라이브러리 사용:
- 텍스트 길이 제한 기능을 제공하는 다양한 JavaScript 라이브러리가 있습니다.
css text overflow
