글자 말줄임 처리 (... 처리하기) + 원하는 만큼 문장 자르기

긴 문장을 말줄임표로 처리하는 속성은 text-overflow: ellpsis와 -webkit-line-clamp:숫자 가 있다.

 

HTML

<div class="word">
  다른 삶은 없다고 말하는 이에게 다른 삶이 있다고 말해서는 안 된다. 어떤 절망에는
  다른 삶을 꺼낼 수조차 없어야 한다. 잦아드는 불씨처럼 타들어가는 숨이 마침내 다
  꺼질 때까지. 형체를 간직하고 있지만 이내 주저앉아 바스러질 때까지. 그대로
  내버려두는 수밖에 없다. 그러니 절망하지 않는 사람이 절망하는 사람에게 할 수
  있는 것은 없다.
</div>

한 줄로 표시하기

CSS

.word {
  display: block;
  width: 500px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
}

text-overflow: ellipsis -설정한 width값 만큼 보여지며 넘어갈 경우 생략부호(...)를 표시함

white-space: nowrap - 줄바꿈을 하지 않고 한줄로 출력되게 함

overflow: hidden - width값을 넘어가는 글자는 보이지 않게 함

 

결과

여러 줄로 표시하기

CSS

.word {
  width: 500px;
  overflow: hidden;
  border: 1px solid #000;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

display: -webkit-box - 유연하게 height를 증감시킬 수 있는 플렉스박스 형태

-webkit-line-clamp : 숫자 - 보여줄 문장의 줄 수

-webkit-box-orient : vertical - 플렉스 박스의 방향 설정(vertical: 가로)

 

결과

참고사이트

https://nh0404.tistory.com/43

[html/css] 글자수 넘어가면 말줄임표 / 원하는 만큼의 줄만 보이게 하기

 

+)말줄임표 없이 원하는 만큼 문장 자르기

.word {
  width: 500px;
  height: 2.4rem;
  line-height: 1.2rem;
  overflow: hidden;
 }

원하는 너비값을 준 후 line-height를 기준으로 보여지고 싶은 줄 수 만큼의 height를 준다.

위 css의 경우에는 2줄을 출력하고 싶었기 때문에 line-height의 2배값을 height에 적용하였다.

그리고, 위 방법은 너비값을 가질 수 있는 block, inline-block일 경우에만 쓸 수 있기 때문에 inline속성인 경우 block이나 inline-block으로 속성값을 바꿔주어야 한다.

 

결과