word-break

2 posts
어색하게 끊기는 한국어 줄바꿈 다듬는 법

어색하게 끊기는 한국어 줄바꿈 다듬는 법

공들여 쓴 글에 제목을 달고 모바일에서 열어봤는데, 마지막 줄에 짧은 단어 하나만 덩그러니 남아 있는 걸 보신 적 있으신가요? 😅 글꼴도 크기도 잘 골랐는데 제목이 어딘가 엉성해 보이는데요. 한국어라면 여기에 더해 "브라우저"가 "브라" / "우저"로 뚝 잘리는 일까지 생깁니다. 이런 문제는 글꼴이나 여백을 아무리 만져도 해결되지 않습니다. 줄을 어디서 나눌지는 브라우저의 줄바꿈 알고리즘이 정하는 영역이기 때문인데요. 우리가 개입하려면 그 알고리즘에 직접 말을 걸어야 합니다. 이번 포스팅에서는 word-break 속성과 text-

부모 요소 밖으로 삐져나오는 긴 영단어 처리법

부모 요소 밖으로 삐져나오는 긴 영단어 처리법

웹 개발을 하다 보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 콘텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹사이트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법을 알아보겠습니다. 영어와 한국어의 줄바꿈 차

Discord