HTML 수정해서 글자단위 줄바꿈하기
단어 단위로 줄바꿈을 하게 되면 PC에서는 그럭저럭 볼만하지만 모바일에서는 보기가 그다지 좋지 않습니다. 이러한 문제를 겪고 CSS 수정을 통해 문제해결을 하려 시도해봤지만, CSS에 대한 이해도가 부족한 탓인지 쉽지가 않았네요. 결국 한 블로그에서 해결방안을 찾아 여러분과 공유해보려고 합니다. 위의 사진은 결국 성공한 스샷입니다.
<html>
<style>
p {word-break: break-all;}
</style>
<head>위처럼 수정을 해주면 됩니다. break-all이 글자단위로 줄바꿈을 하는 것을 말한다고 하니 핵심 구절이 되겠네요. 참고로 word-break가 아닌 word-wrap은 CJK(Chinese, Japan, Korea)와 같은 아시아계 언어는 해당되지 않는다고 합니다. 또, break-all는 normal과 같은 기능을 한다고 하고, break-word는 단어 단위로 끊어준다고 합니다.
여러모로 헷갈리는 부분들이 많았지만 결국 성공하니 뿌듯하네요.
블로그의 정보
참순이네
분도🇰🇷