공부 | HTML, CSS 말 줄임(단일 행, 다중 행) 스타일 정리

단일 행과 다중 행에서 글자가 많을 경우 말줄임(...) 스타일 적용하기

❓상황

단일 행과 다중 행 말줄임을 강의 수강했을때 처음 접하게 되었고, 이를 학습하여 정리하게 되었음.

 

📖 말 줄임이란?

글자의 길이가 긴 경우, 특정 구간을 넘어가면 ...을 표시하여 텍스트의 길이를 제한할 수 있다.

 

흔히 쇼핑몰에서 텍스트가 많은 상품명이 있는 경우가 많다.

 

의식하진 않았겠지만, 텍스트가 많다고해서 디자인이 뒤틀리거나 하지 않다.

그 이유는 말 줄임 스타일을 적용함으로써 디자인을 변화시키는 것을 감소하기 때문이다.

 

🧮 정리

말 줄임 : 단일 행

 

텍스트의 양이 많아서, 한 줄로 표현되지 않고 여러줄로 표현되었다고 가정해보자

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing

 

텍스트의 양이 많아 자동으로 여러 줄로 표현되었다.

우선, 강제적으로 여러 줄이 되지 않고, 한 줄로 표현되게 CSS를 작성한다.

white-space: nowrap;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing

 

그렇게 되면, 가로 스크롤바가 생길 정도로 길어진 한줄이 된다.

이제, 화면 밖으로 넘어가는 부분은 보이지 않도록 한다.

overflow: hidden;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indust

 

그리고, 넘어가는 부분이 있다면 말 줄임표(...)를 생성해주도록 한다.

text-overflow: ellipsis;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ind...

 

 

CSS : 단일 행 말 줄임

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

 

말 줄임 : 다중 행

단일 행과 똑같은 텍스트를 가지고 있다고 가정해보자

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing

 

이번에는 한 줄이 아닌, 2줄이나 3줄 등 내가 원하는 줄까지만 표현하고, 그 이상은 말 줄임을 이용하여 텍스트를 표현하고자 한다.

몇 줄로 제한하기 위해서는 선행되어야 할 조건이 있다.

해당 영역을 box 형태로 만들고, 수직정렬로 맞춘다.

display: -webkit-box;
-webkit-box-orient: vertical;

 

그 다음, 줄 수를 제한한다.

-webkit-line-clamp: 2    // 숫자를 입력

 

여기까지하면, 2줄까지만 화면에 보이도록 설정했다.

마지막으로, 2줄 초과되는 행은 안보이도록 설정하면된다.

overflow: hidden;
text-overflow: ellipsis;

 

CSS : 다중 행 말 줄임

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;