For most situations, the answer is an easy one:
CSS’s word-break: break-word;
It works well for both Japanese and English.
That’s all you need. This isn’t a recipe website and you don’t need to scroll down.
IE Support
If you need IE support, you won’t be able to use word-break: break-word; You will be stuck with CSS’s line-break: normal; which will split English words right in the middle, but will do an acceptable job with Japanese. This issue can be mitigated by only applying the style when the content is Japanese
Example
Set a lang attribute on the html element with JS:
// Get the language. For this example, we pull the language from the browser
const lang = navigator.language.substring(0, 2);
// Set the language on the <html> element
document.querySelector('html').setAttribute('lang', lang);Set styles based on the set language
html[lang="ja"] {
.some-class {
line-break: normal;
}
}<wbr> element
Another helpful aspect of wrapping Japanese text is the <wbr> element.
The <wbr> element is for “word-break recommendations” which is helpful for recommending where word breaks occur within text and is especially helpful for column headers with multiple Japanese words. I’ve seen this behavior emulated with the following:
split1<mywbr />split2
mywb::after{
content: "\a"; /* line break */
white-space: pre;
}If you have any tips or questions, or if this untested code doesn’t work, leave a comment 🙂