줄바꿈_CSS

• 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정

word-break

• 단어의 분리를 결정하여 줄바꿈에 관여한다

속성 값

• normal(기본값) : 박스 넘침- break-all : 공백 상관 없이 줄바꿈
• keep-all : 공백에 따라서 줄바꿈(따라서 공백사이의 문장이 길면 박스 넘침)
• break-word : 공백에 따라서 안넘치게 줄바꿈

word-wrap

• word-break와 조합하여 선언하기도 함

word-break: break-all;
word-wrap: break-word;

white-space

• 공백 축소 여부 및 축소 방법
• 줄이 줄바꿈 할 수 있는지의 여부

속성값

• normal: 공백없음, 박스크기에 따라 줄바꿈
• nowrap : 공백은 축소하지만 박스 넘침
• pre-line: 공백 축소와 박스 크리에 따라 줄바꿈

flex-wrap

• wrap : 컨데이너 너비에 따라 줄바꿈

text-overflow

• 말줄임 효과

한 줄로 줄이기

.review {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

overflow: hidden;: 박스에서 넘쳐난 텍스트 숨기기
white-space: nowrap;: 줄바꿈이 없어짐
text-overflow: ellipsis;: ... 말줄임 효과
word-break: break-all;: 어절이 유지되지 않고 끊어져서 줄바꿈 됨

여러 줄로 바꾸기

.review {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;   // 문단으로 끊어져서 줄바꿈 됨
}
-webkit-line-clamp: 글의 최대 라인수를 결정

-webkit은 크로스브라우징을 위해 필요한데,
-webkit은 구글, 사파리 브라우저에서 사용 가능
적용할 때 브라우저 지원 범위를 확인하고 사용