문장을 내가 지정한 영역 밖으로 못나가게 하거나 지정한 영역이 좁아 말줄임표를 사용해야하는 경우가 있습니다. 알라딘의 책 소개처럼 !
이러한 경우 말줌임표를 ㅁ + 한자 키로 직접 입력해도 되지만 그러면 일일이 입력해야하는 번거로울 뿐만 아니라 문장에 글자가 추가되거나 삭제될 때마다 일일이 수정해야합니다.
이럴 때 사용 가능한 속성을 text-overflow: ellipsis 와 -webkit-line-clamp: 숫자 가 있습니다.
이 둘의 사용법과 차이점은 다음과 같습니다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="wordbox">
<div class="word">
사랑의 앞이 튼튼하며, 거친 사막이다. 청춘의 보배를 기쁘며, 날카로우나 구하지 하여도 그러므로 뿐이다. 이상 무엇을 목숨을 그들에게 천하를 능히 위하여, 그들은 듣기만 부패뿐이다. 내는 오직 실로 두손을 봄바람이다. 어디 무엇이 소금이라 있으며, 예가 기관과 인류의 뿐이다. 풀이 청춘의 지혜는 창공에 인간은 때까지 봄바람이다. 인류의 피는 주며, 자신과 쓸쓸하랴? 돋고, 그들의 것은 위하여, 그와 위하여서. 수 웅대한 설레는 피가 청춘이 피고, 것이다. 이는 이상이 구하기 생생하며, 천하를 운다.
어디 꾸며 것은 현저하게 작고 인간의 눈에 것이다. 가장 그들의 실현에 그들의 맺어, 있으랴? 실로 싶이 유소년에게서 얼음에 새 풀밭에 보라. 무엇을 위하여서 튼튼하며, 찾아 들어 우는 피가 구하기 풍부하게 것이다. 두손을 청춘의 물방아 따뜻한 쓸쓸하랴? 과실이 현저하게 몸이 청춘 이는 꽃이 피고, 것이 뭇 아니다. 오직 같으며, 인간은 곧 있는 있는 위하여서. 우리 방황하여도, 꽃이 청춘을 이것이다. 것이다.보라, 열락의 청춘이 싶이 크고 끓는다. 창공에 그들을 노년에게서 봄바람을 밝은 하여도 것이다. 얼음 착목한는 것은 있을 거선의 두기 속잎나고, 것이다.
</div>
</div>
</body>
</html>
한 줄만 보이게 하기
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
</style>
text-overflow: ellipsis : 한 문장에서만 사용가능
white-space : nowrap 속성으로 줄바꿈을 방지하고, 해당 너비를 넘어선 부분의 글자들을 overflow : hidden을 적용하여 숨겨줍니다.
그리고 text-overflow : ellipsis 를 적용하면 말줄임표(...)가 숨겨지는 영역의 끝 부분에 생깁니다.
여러 줄 단위로 글자 자르기
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
/* height: 4.8em;*/
text-align: left;
word-wrap: break-word;
display: -webkit-box;
/* -webkit-line-clamp: 3 ;*/
-webkit-box-orient: vertical;
}
</style>
여러 줄을 보이게 하기 위해서는 white-space : nowrap 속성을 해제하여 해당 너비에 맞게 줄바꿈이 이루어지게 한 뒤, 보이게 할 글자의 줄 수만큼의 줄높이를 지정합니다.
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
/* height: 4.8em;*/
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;
}
</style>예제에서는 한 줄 당 line-height 를 1.2로 설정하였습니다.
word-wrap : break-word; - 단어 단위로 줄바꿈
text-align : left; - 텍스트를 가운데나 오른쪽 정렬을 하게 되면 말줄임표가 이상한 곳으로 갈 수 있음
display: -webkit-box : 유연하게 height를 증감시킬 수 있는 플렉스 박스형태로 변환
-webkit-line-clamp: 3 : 보여줄 줄 수
-webkit-box-orient: vertical : 플렉스 박스의 방향 설정(가로)
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
/* height: 4.8em;*/
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2 ;
-webkit-box-orient: vertical;
}height를 주지 않고, -webkit-line-clamp : 2; 만 주어도 2번째 줄 까지 보여지며 2번째 줄 마지막에 말줄임표가 생성됩니다.
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
height: 3.6em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
/* -webkit-line-clamp: ;*/
-webkit-box-orient: vertical;
}
</style>반대로, height 만 주고 -webkit-line-clamp를 지정하지 않은 경우, 말줄임표는 생성되지 않습니다
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
height: 3.6em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3 ;
-webkit-box-orient: vertical;
}
</style>보통 첫 줄의 줄높이를 1.2로 설정한 경우
두번째 줄까지 보이게 하려면 1.2 x 2 = 2.4em 의 높이를 주면 됩니다.
같은 방법으로 세번째 줄까지 보이게 하려면 1.2 x 3 = 3.6em 의 높이를 주면 됩니다.
<style>
.word {
margin:100px;
outline: 1px solid black;
display: block;
color: black;
width: 630px;
font-size: 20px;
font-weight: bolder !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.2;
height: 4.8em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3 ;
-webkit-box-orient: vertical;
}
</style>height는 4.8em으로 네번째 줄까지 보이게 하고, -webkit-line-clamp : 3; 을 주게 되면 4번째 줄 까지 보여지며 3번째 줄 마지막에 말줄임표가 생성됩니다.
