채택완료
모바일 view.skin 에서 영어 단어 잘려서 줄바뀜 css 수정 문제
문제:
모바일 view,skin 화면에서 books --> boo 줄바꿈 ks, get --> g 줄바꿈 et 로 표시됩니다.
수정:
/html/theme/tokwok/mobile/skin/board/basic/style.css 에서
변경전 word-break:break-all;
변경후 word-break:keep-all;word-wrap:break-word;
변경후에도 단어가 잘리는 것은 그대로 입니다.
뭐가 잘못되었을까요?
https://tokwok.com/lang_en/10
모바일 view,skin 화면에서 books --> boo 줄바꿈 ks, get --> g 줄바꿈 et 로 표시됩니다.
수정:
/html/theme/tokwok/mobile/skin/board/basic/style.css 에서
변경전 word-break:break-all;
변경후 word-break:keep-all;word-wrap:break-word;
변경후에도 단어가 잘리는 것은 그대로 입니다.
뭐가 잘못되었을까요?
https://tokwok.com/lang_en/10
답변 1개 / 댓글 2개
채택된 답변
+20 포인트
2026-05-13 (수) 19:26:24
이유는 wrap 내부에서 span 으로 별도로 엘리먼트가 부여되어 있기 때문입니다.
해당 span 엘리먼트에도 break-all 속성을 부여해야하죠
스크린샷 보시면 wrap 에는 break-all 이 있는데 내부 span 에는 없어서
여기 keep-all; 룰을 따르고 있습니다.
이처럼 내부 span 은 #bo_v_con css 룰인 keep-all; 을 따르고 있으니 the 에서 e 만 줄바꿈 됩니다.
여기서
해당 span 에도 word-break:keep-all; 속성을 주셔야
the 가 단어 단위로 줄바꿈되어 아래로 내려가게 됩니다.
2줄요약
wrap 개체에는 word-break:keep-all; 속성이 있지만 내부 엘리먼트 span 있어서 미적용.
내부 span 도 적용하면 줄바꿈 완료!
원인은
이것입니다.
해당 span 엘리먼트에도 break-all 속성을 부여해야하죠
스크린샷 보시면 wrap 에는 break-all 이 있는데 내부 span 에는 없어서
여기 keep-all; 룰을 따르고 있습니다.
이처럼 내부 span 은 #bo_v_con css 룰인 keep-all; 을 따르고 있으니 the 에서 e 만 줄바꿈 됩니다.
여기서
해당 span 에도 word-break:keep-all; 속성을 주셔야
the 가 단어 단위로 줄바꿈되어 아래로 내려가게 됩니다.
2줄요약
wrap 개체에는 word-break:keep-all; 속성이 있지만 내부 엘리먼트 span 있어서 미적용.
내부 span 도 적용하면 줄바꿈 완료!
원인은
이것입니다.
답변에 대한 댓글 2개
carlpark
2026-05-14 (목) 12:37:57
혹시 문제 발생 전과 후 내용이 필요하신 분이 있으실까봐 해당내용을 기록해 두었습니다.
https://tokwok.com/notice/9
https://tokwok.com/notice/9
답변을 작성하려면 로그인이 필요합니다.