javascripthtmlcssword-wrap

How to prevent Asian characters from breaking lines by words

I'm currently working on an e-commerce website. After translated all products into Japanese, my customer asked to apply the following changes:

By default, product name will be automatically wrapped like this:

|  あいうえおかきく　けこさ  |
|  しすせ                  |

(I use "|" to show the border of element) As you see, the second part "けこさしすせ" is divided because of limited width.

What they expected is, just like default English line break method, it should be like:

|  あいうえおかきく　       |
|  けこさしすせ            |

Considering SEO I cannot simply replace space with br, or change it's structure. Is there anyway I can archive this?

Please see fiddle here.

Thanks!

Solution

  • You can use 

    white-space: nowrap

    on each part of the text that you hope not to be wrapped around. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

    The HTML markup nobr can be used but is not recommended. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

    See

    http://jsfiddle.net/zo9oygfk/1/

    vs

    http://jsfiddle.net/zo9oygfk/4/

    As in your comment, the wrapper having overflow: hidden is not affecting it.