whitespace

1. whitespace

 

whitespace는 공백을 나타내는 스페이스, 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성이다. 그래서 어떤 경우는 whitespace를 따로 정해주지 않았기때문에 텍스트에 \n를 사용해도 줄바꿈이 처리가 되지 않았던 것이다.

요즘 tailwind css를 사용하고 있어서 tailwind 를 이용해서 이해해보자.예시는 tailwind 참고해서 생각안날때마다 보고 간략하게 말로 정리해보면 

 

white-space 속성으로 가질 수 있는 값들은  normal | nowrap | pre | pre-line | pre-wrap 이 있다.

1) white-space:nowrap 

말그대로 nowrap 텍스트입력에 줄바꿈이 있어도 줄바꿈 하지 않고, 줄바꿈과 공백을 축소시켜 보여준다. 공백이 10개 있어도 하나의 공백으로 보여준다.

 

2. white-space:pre

텍스트에 공백과 줄바꿈을 입력하면 이 공백와 줄바꿈을 유지하여 있는 그래도 보여준다. 하지만, 텍스트가 줄바꿈이 되지 않는다.

 

3. white-space:pre-line

있는 그대로 텍스트를 공백과 줄바꿈을 보여주지만, 텍스트가 길때에는 알아서 줄바꿈도 해준다. 또 공백이 여러개인건 하나로 보여준다.

반응형 디자인할때 모바일과 pc버전에 text정렬이 다른경우 유용하게 써먹을 수 있을거 같다. 예를 들어, 모바일 버전일때에는 텍스트 공백없이 다 보여줄때 whitespace-normal , pc버전일때에는 텍스트를 더 크게 한다음 공백과 함께 보여줄때에는 white-space:pre-line

 

4. white-space:pre-wrap

있는 그대로 텍스트의 공백과 줄바꿈을 보여주면서, 알아서 텍스트가 길어질때 줄바꿈도 해준다. pre-line 과 pre-wrap 을 가장 많이 사용할 것 같다.

 

2.-webkit-line-clamp

title의 길이가 길거나 content의 내용이 길때 말줄임표로 나타내는 속성

• 지정한 줄 수만큼 보여줄 수 있다.
• display 속성을 -webkit-box 또는 -webkit-inline-box로 주어야 동작한다. 
• -webkit-box-orient 속성을 vertical로 설정한 경우에 동작한다.
• text-overflow: ellipsis; 를 같이 이용해서 넘치는 텍스트를 ...로 나타낼 수 있다.

 -webkit-line-clamp: 2;	//나타내고 싶은 줄수
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;