영역에 비해 글자 수가 넘치면 ( "..." ) 로 말줄임표를 사용하는 경우가 있다. javascript로 일정글자 수 이상일 때 slice 함수를 활용 할 수도 있지만 css로도 제어 말줄임표를 줄 수 있다.
아래 코드와 이미지는 글자들이 width값에 맞춰 자동으로 줄바꿈이 이뤄지고 있는 상태이다.
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.textBox {
width: 300px;
padding: 14px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="center">
<p class="textBox">
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc. The generated Lorem
Ipsum is therefore always free from repetition, injected humour, or
non-characteristic words etc.
</p>
</div>
</body>
</html>
한 줄로 제한하기
width값이 있는 p태그에 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 스타일을 추가하면 ( "..." ) 말줄임표와 함께 영역을 넘치는 글자는 숨겨진다.
white-space: nowrap : 전체 문단을 한 줄로 표시해주는 역할
overflow: hidden : 영역 밖을 넘어간 글자들을 숨겨주는 역할
text-overflow: ellipsis : 영역 밖을 넘어가면 말줄임표 ( "..." ) 추가하는 역할
.textBox {
width: 300px;
padding: 14px;
border: 1px solid #000;
/* 추가 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
여러 줄로 제한하기
2줄 이상의 글에 마지막에만 말줄임표를 적용하고 싶으면 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; 스타일을 추가하면 된다.
overflow: hidden : 영역 밖을 넘어간 글자들을 숨겨주는 역할
text-overflow: ellipsis : 영역 밖을 넘어가면 말줄임표 ( "..." ) 추가하는 역할
display: -webkit-box : 플렉스 박스를 구현하기 위해 웹킷 엔진에서 사용하는 속성
-webkit-box-orient: vertical : flexible box의 흐름 방향을 지정하는 속성 (vertical: 세로, horizontal: 가로)
-webkit-line-clamp: 3 : 텍스트 라인 수
.textBox {
width: 300px;
padding: 14px;
border: 1px solid #000;
/* 추가 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
문제는 영역에 padding이나 height 값을 추가하면 말줄임표 이후에 글씨들이 보인다.
라인 수 제한을 걸어야 하는 태그에 부모 태그(<div></div>)를 추가하고 부모태그에 padding이나 height 스타일을 주면 된다.
<html lang="en">
<head>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
/* 추가 */
.padding {
padding: 14px;
border: 1px solid #000;
}
.textBox {
// padding 값 없음
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div class="center">
<div class="padding"> <!-- 추가 -->
<p class="textBox">
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc. The generated Lorem
Ipsum is therefore always free from repetition, injected humour, or
non-characteristic words etc.
</p>
</div>
</div>
</body>
</html>
참고
'Css' 카테고리의 다른 글
| svg 색상 변경 (0) | 2024.08.23 |
|---|---|
| 다크모드 적용 (emotion) (0) | 2024.08.23 |
| tailwind 변수 값 적용 (0) | 2024.08.23 |
| tailwind 폰트 적용 (0) | 2024.08.23 |
| emotion 설치 & 사용법 (0) | 2024.08.22 |
