여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 글이 길 때 말줄임표(...) 표시하는 방법
글이 길 때 말줄임표(…) 표시하는 방법
9개월전 작성
8개월전 수정

말줄임표 만드는 방법을 알아보자.

반응형 홈페이지를 만들고 테마나 템플릿을 만들다보면 제목이 너무 길어서, 말줄임이 필요할 때가 있다.

리스트에서 글이 길 때 말줄임표 표시하는 방법을 알아보자.

 

한 줄만 보이고 말 줄임표 나오게 하기

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에 적용하여 주로 사용.

 

미리보기
빛 하나 없는 공간 어둠이 올 때 표정따윈 다 사라져 또 이렇게 끊임없이 들려와 지독한 밤 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.

 

두 줄만 보이고 말 줄임표 나오게 하기

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 사용하여 줄 수 결정할거라 무조건 넣어야되는 코드.

 

미리보기
아스팔트 위 도시는 꽤 멋지다는 걸 일탈이 필요한 밤 잠시만 모두 잊고 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 뭘 좀 아는 느낌 나침반 없이 헤매지 않을 이 밤

 

세 줄만 보이고 말 줄임표 나오게 하기

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줄까지 표시되게끔 하는 코드.

 

미리보기
철이 없지 나는 가끔은 어른이 됐음 해 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 하루 종일 놀래 누군가 의미 없이 얘길 나눌래

 

이런식으로 한줄과 문단에 말 줄임표를 표시할 수 있다.

 

한 줄은 모바일 버전에서 게시글 제목이 길 때 사용 하고있다.

문단은 대부분 게시판이 있다면 게시판 내의 게시글을 미리보기로 표현해줄 때 사용하면 좋을 것 같다.

Mingg`s Diary
밍구
공부 목적 블로그