- break-all 은 단어를 깨버린다(?)로 생각하면 좋습니다.
줄바꿈 위치에 단어가 걸리게 될 때 줄바꿈에 맞춰서 단어를 자르는 것입니다.
단어가 이렇게 잘리면 가독성의 문제가 생길 수 있죠.
Dog 라는 단어가 끝부분에 걸리게 될 때
Do
g
이렇게 될 수 있죠.
- keep-all 은 모두 유지한다로 생각하면 좋겠습니다.
위와는 반대로 줄바꿈 위치에 단어가 걸리면 단어가 깨지지 않도록 줄바꿈해서 다음줄로 내려버립니다.
단점은 끝부분의 공백이 들쑥 날쑥하여 미관상(?) 좋지 않습니다.
- 지정하지 않을때 기본값은 keep-all 입니다.
※ 한글의 경우 미묘한 차이가 있는데 위 예제로 확인해 보세요 ^^
word-break
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
word-break 는 문자열의 줄바꿈을 설정합니다.
단어기준으로 줄바꿈 할지 단어를 무시하고 줄바꿈 할지 지정할 수 있습니다.
예제 1
예제로 봅시다 ^^
보기
When the sun shines on the mountains
And the night is on the run
It's a new day
It's a new way
And I fly up to the sun
I can feel the morning sunlight
I can smell the new mown hay
I can hear god's voices calling
On my golden skylight way
나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데 철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요 시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데 철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요 시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
|
|||||
설명
예제 2
text-align : justify 가 출동한다면 어떨까요?
보기
When the sun shines on the mountains
And the night is on the run
It's a new day
It's a new way
And I fly up to the sun
I can feel the morning sunlight
I can smell the new mown hay
I can hear god's voices calling
On my golden skylight way
나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데 철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요 시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
나의 모든 사랑이 떠나가는 날이 당신의 그 웃음 뒤에서 함께하는데 철이 없는 욕심에 그 많은 미련에 당신이 있는 건 아닌지 아니겠지요 시간은 멀어 집으로 향해 가는데 약속했던 그대만은 올 줄을 모르고
|
|
|||||||||
설명
- keep-all 설정의 미관상 안좋은 부분은 text-align : justify 로 살려줄 수 있습니다.
- text-align 도 참고해 보세요 ^^
- text-align 도 참고해 보세요 ^^
+ 관련 CSS +