자동줄바꿈 썸네일형 리스트형 자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) 퍼블리싱을 하다 보면 텍스트가 정해진 가로 값 영역을 넘어가는 경우 어떤 기준으로 줄바꿈 해줘야 할지 설정을 해줘야 합니다. 단어별로 다음 줄로 넘겨준다든지, 단어에 상관없이 무조건 다음 줄로 넘겨준다든지... 이럴 때 필요한 css 를 알아보도록 하겠습니다. ※ word-break .text {word-break:break-all;} word-break 에서 느껴지실 텐데 말 그대로 다 잘라준다고 생각하시면 됩니다. 줄바꿈 처리를 하지 않으면 기본적으로 단어 위주로 다음 줄로 줄바꿈이 이뤄질 것입니다. 근데 여기서 문제가 띄어쓰기를 하지 않고 글을 썼을 경우에 모든 글을 한 단어로 생각해서 글을 쓰는 영역의 가로 값을 넘어가도 뚫고 작성이 된다는 것입니다. 이때 word-break을 사용하시.. 자동줄바꿈 속성 (white-space, word-break, word-wrap, text-overflow) 퍼블리싱을 하다보면 div같은 공간을 설정하고 그 안에 텍스트를 넣는 경우가 많은데요. 그때 유용하게 사용할수 있는 자동줄바꿈 형식에 대해서 알아보려고 합니다. white-space 띄어쓰기나 줄바꿈, 탭으로 인한 공백 등의 공백문자를 처리하는 방법 설정. white-space:normal; /*white-space 기본값으로 연속 공백과 줄바꿈 등을 통합해서 표현*/ /*보통 띄어쓰기와 줄바꿈을 몇번 하든지 결과는 띄어쓰기 한칸 인것처럼 적용*/ white-space:pre; /*normal과 반대로 원문 그대로 출력*/ white-space:nowrap; /*공백은 nomal, 줄바꿈은 pre*/ white-space:inherit; /*부모요소의 값을 상속*/ word-break 텍스트가 들어가는 .. 이전 1 다음
