말줄임표 만드는 방법을 알아보자.
반응형 홈페이지를 만들고 테마나 템플릿을 만들다보면 제목이 너무 길어서, 말줄임이 필요할 때가 있다.
리스트에서 글이 길 때 말줄임표 표시하는 방법을 알아보자.
한 줄만 보이고 말 줄임표 나오게 하기
html 예시
<div class="list"> <div class="list-title"> 빛 하나 없는 공간 어둠이 올 때 표정따윈 다 사라져 또 이렇게 끊임없이 들려와 지독한 밤 Wasn't with me back then but they right here now 날 찾아오는 악몽에 Nightmares make me go insane 까맣게 짙어진 밤 내 맘 속에 있는 monster Alone in the dark 눈을 가려 Demons in the night Para-Noia don't you look behind. </div> </div>
CSS 예시
.list
{
width: 100%;
}
.list .list-title
{
display: block;
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
width: 60vw;
}
사용된 코드 설명
display: block;
:
사실 div는 block 속성이라 여기선 없어도된다. 다만 span 같은 inline 속성에서는 말줄임표가 표시 되지 않으므로 display: block; 속성을 준다.
overflow : hidden;
:
넘치는거 숨기는 코드.
text-overflow : ellipsis;
:
말 줄임표(…) 표시 하는 코드.
white-space : nowrap;
:
줄 바꿈 안하게하는 코드.
width: 60vw;
:
가로로 어느정도까지 글이 표시되고 그 이상은 자를지 결정하는 코드. 나의 경우 mobile에 적용하여 주로 사용.
기본 예시
두 줄만 보이고 말 줄임표 나오게 하기
HTML 예시
<div class="list"> <div class="list-title"> 아스팔트 위 도시는 꽤 멋지다는 걸 일탈이 필요한 밤 잠시만 모두 잊고 I know I want turn it up loud 완벽하게 기분 좋아 두 손을 위로 Fell like I'm touchin` the sky 움직여 지금 여기 공기 우리만 느껴 They're gonna be jealous 모두 질투할 만큼 더 jealous 자유로운 groove 이 분위긴 뭔가 달라 오늘을 잃어버린 대도 괜찮아 멈추지 마 볼륨을 올려 줘 숨이 벅차도록 이 느낌 이대로 밤이 다 새도록 영원하고 싶은 오늘 밤 오랫동안 잊고 있었던 감정 애써 모른 척 했던 거야 전화긴 꺼 둬 고민은 지워 심장이 터질듯이 춤추고 있잖아 I know I want Turn it up load 뭘 좀 아는 느낌 나침반 없이 헤매지 않을 이 밤 </div> </div>
CSS 예시
.list
{
width: 100%;
}
.list .list-title
{
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 60vw;
}
사용된 코드 설명
display: block;
:
사실 div는 block 속성이라 여기선 없어도된다. 다만 span 같은 inline 속성에서는 말줄임표가 표시 되지 않으므로 display: block; 속성을 준다.
white-space : normal;
:
줄 바꿈 되게끔 하는 코드. 기본값이므로 예시에선 아예 지워버렸다.
line-height: 1.2;
:
한 줄 높이를 1.2로 설정하는 코드.
word-wrap: break-word;
:
단어 단위로 자르는 코드.
display: -webkit-box;
:
-webkit-line-clamp 사용하여 줄 수 결정할거라 무조건 넣어야되는 코드.
-webkit-line-clamp: 2;
:
2줄까지 표시되게끔 하는 코드. 이 때 이 class에 padding-bottom을 주면 그 다음 줄이 표시되니 주의하자.
-webkit-box-orient: vertical;
:
-webkit-line-clamp 사용하여 줄 수 결정할거라 무조건 넣어야되는 코드.
기본 예시
세 줄만 보이고 말 줄임표 나오게 하기
html 예시
<div class="list"> <div class="list-title"> 빛 하나 없는 공간 어둠이 올 때 표정따윈 다 사라져 또 이렇게 끊임없이 들려와 지독한 밤 Wasn't with me back then but they right here now 날 찾아오는 악몽에 Nightmares make me go insane 까맣게 짙어진 밤 내 맘 속에 있는 monster Alone in the dark 눈을 가려 Demons in the night Para-Noia don't you look behind. </div> <div class="list-title"> 아스팔트 위 도시는 꽤 멋지다는 걸 일탈이 필요한 밤 잠시만 모두 잊고 I know I want turn it up loud 완벽하게 기분 좋아 두 손을 위로 Fell like I'm touchin` the sky 움직여 지금 여기 공기 우리만 느껴 They're gonna be jealous 모두 질투할 만큼 더 jealous 자유로운 groove 이 분위긴 뭔가 달라 오늘을 잃어버린 대도 괜찮아 멈추지 마 볼륨을 올려 줘 숨이 벅차도록 이 느낌 이대로 밤이 다 새도록 영원하고 싶은 오늘 밤 오랫동안 잊고 있었던 감정 애써 모른 척 했던 거야 전화긴 꺼 둬 고민은 지워 심장이 터질듯이 춤추고 있잖아 I know I want Turn it up load 뭘 좀 아는 느낌 나침반 없이 헤매지 않을 이 밤 </div> <div class="list-title"> 철이 없지 나는 가끔은 어른이 됐음 해 I'm going all the way 매일 밤 취해 깊은 생각은 하고 싶지 않지. 한 두시쯤 일어나 손에 들린 건 물 대신 카페인 온종일 아무 생각 없이 시간을 낭비 오늘만은 adulthood 하루종일 놀래 누군가 의미 없이 얘기 나눌래 아무런 말도 듣기 싫어 만만한 곳으로 끊어 물론 편도로 시간은 날 위해 돌아가지 않어 Join me in the air 잠시 어른이 된 것 같지 우린 늘 짜여진 로로로행동하곤 해 잠깐은 탈피 넌 말해 why you trippin' 잠시 어른이 된 것 같지 잠깐은 꺼 놔 봐 전화기 머릿속이 복잡해 가끔씩 이건 문제야 다 모든 시선이 날 보는 듯 해 Oh I don't wanna rush 급하게 살고 싶지 않아 하 참견의 시선은 무시 전화도 재껴 풀어 둬 넥타인 풀어 왜 그리 진지해 어제고 오늘이고 전부 답답한 소릴 늘어놓지 귀를 막고 싶어져 너의 하룬 어땠고 How do you feel right now 하루 종일 놀래 누군가 의미 없이 얘길 나눌래 </div> </div>
CSS 예시
.list
{
width: 100%;
}
.list .list-title
{
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
height: 3.6rem;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 60vw;
}
사용된 코드 설명
height: 3.6rem;
:
-webkit-line-clamp를 최근 브라우져들은 거의 지원하므로 height를 안넣어도되지만, 지원되지 않는 브라우져에서는 height 지정해줘야한다. 물론 지원되지 않는 브라우져에서는 … 표시 생략 된다.
-webkit-line-clamp: 3;
:
3줄까지 표시되게끔 하는 코드.
기본 예시
이런식으로 한줄과 문단에 말 줄임표를 표시할 수 있다.
한 줄은 모바일 버전에서 게시글 제목이 길 때 사용 하고있다.
문단은 대부분 게시판이 있다면 게시판 내의 게시글을 미리보기로 표현해줄 때 사용하면 좋을 것 같다.
공부 목적 블로그