A ferromagnetic domain

Yesterday I was racking my brains to work out how to deal with this:

There are eleven items on this menu and if the window is made too small, English text breaks between words and Japanese text between characters in a single menu item. Although this behaviour is normal in paragraphs, it’s not suitable for menu items so, how to stop it?

I eventually found the answer after much searching:

white-space: nowrap; (W3schools documentation, Tizag.com tutorial)

(I had expected it to have the name word-wrap or text-wrap or something like that…)

With this attribute applied to the <li> tag, the menu appears as shown below. Now the word appears on the lower line rather than being broken across two. Hoorah!

NB: If applied to large chunks of text, white-space: nowrap; will make the text stick out beyond its containing box unless an overflow: scroll; or overflow: hide; attribute is also used, so white-space: nowrap; is best reserved for small menu items.