[css] 요소 안 내용 줄바꿈 금지 & 말 줄임표(...) 처리

요소 안의 내용 줄바꿈 금지하기

 

아래 캡쳐의 '제출하기' 버튼과 같이, 형제요소의 길이가 길어지는 것에 따라 원치 않게 줄바꿈이 일어나는 경우가 있다.

줄바꿈을 원치 않는 요소 안에 white-space: nowrap 속성을 주어 줄바꿈을 방지할 수 있다.

button {
  white-space: nowrap;
}

---

요소를 삐져나오는 텍스트 말줄임표 처리

긴 텍스트를 세로길이가 1rem으로 제한된 div 안에 우겨넣으려고하면 아래와 같이 삐져나옴 현상이 발생한다.

 

 

1) white-space: nowrap 속성을 이용해 세 줄짜리를 한 줄로 만들어준다.

 

2) overflow: hidden 속성을 이용해 삐져나온 부분을 보이지 않도록 숨김 처리한다.

3) text-overflow: ellipsis 속성을 이용해 말줄임표(...)를 넣어준다.

 

 

정리하면, 말줄임표가 필요한 요소에 아래 세 가지 속성을 넣어주면 된다.

 

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

 

 

 

 

반대로, 줄이 자연스럽게 바뀌길 원하는데 위와 같이 한 줄로 이어져서 보일 땐....

 

1) 각각의 요소들에 white-space: nowrap을 해주어 아래와 같이 만들기

white-space: nowrap

 

 

2) 요소들을 감싸고 있는 콘테이너에 flex-wrap: wrap을 해주어 줄바꿈 일어날 수 있도록 하기

flex-wrap: wrap

 

 

 

* 위 방법으로 해결이 되지 않을 땐, word-break 속성을 살펴보도록 한다.

word-break: break-all;