[CSS] 한줄 효과

개요

가끔, 제목이 길거나 적당히 띄어주지 않으면 내 레이아웃을 넘어서 저 어딘가로 글이 나아가고 있다

그 때 주는 것이 한줄 효과 즉, 한 줄로 나타내는 것인데

이것을 분해해보겠다

분해

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

overflow: hidden; 

글이 넘치는 걸 숨겨준다!

정해진 크기에 맞게 딱 없었던 것 처럼 잘라 쓰기 편하다

white-space: nowrap;

white-space란, 공백 문자를 처리하는 방법이다.

nowrap을 하게 되면 줄글이 밑으로 가지 않게 한다

text-overflow: ellipsis; 

출처 : https://aboooks.tistory.com/382

text-overflow는 좀 독특하다

2가지 경우를 충족할 때 쓸 수 있다는데, 

1. overflow가 hidden, scroll, auto일 경우 / 2.  white-space가 nowrap일 경우 가능하다고 한다

 

위에서 두 가지를 충족했으니 text-overflow가 어떤 기능을 가진 애인지 알아보자

text-overflow: clip -> 텍스트 그냥 잘라버림 싹뚝

text-overflow: ellipsis -> 잘린 텍스트를 '...'으로 표시 

 

우린 ellipsis를 쓴 걸 보아하니 뒤에 내용이 있다는 걸 알려주려고 했나 보다