Make breadcrumbs with multiple <a> tags word break and wrap to another line

user_9249880 0
Viewed 400

Just wondering if this is possible. So I am using Japanese kanji and kana in this web app mobile version.

So all breadcrumbs except the last one are links to previous pages. Since each breadcrumb is a link, I am having trouble making them display inline like the picture and also break mid-breadcrumb to wrap to a new line.

I can make them break at the end of a breadcrumb link and start a new line, but I want to try to break a breadcrumb mid-text and wrap it to a new line and continue all subsequent breadcrumbs on the new line also.

The container div would be set to 100% width.

Something like this:

enter image description here

flexbox css html javascript
1 Answers

So, in modern web browsers, it seems like word-break:break-all; is already the default style automatically for Eastern languages. No CSS or JS in this Demo, and it works perfectly (tested Chrome).

But if you did have problems with wrapping, or if you wanted to guarantee compatibility across devices and browsers, then use some CSS. Specifically...

word-break: break-all;

Take a look at a full working demo (or, a full working Japanese demo, (or yet a third working Japanese demo with your exact characters))...

<html>
<head>
<style>
    p {
        word-break: break-all;
    }
</style>
</head>
<body>
<p>loooooooooooooooooooooong woooooooooooooooooordddddddddddddddddddd.</p>
</body>
</html>

Looks like this...

Long word wrap.

Long word wrap - Japanese Text

Of course, you may want to wrap it to a specific length. In that case, add this CSS style: p { width:500px; }, and then it'll wrap after 500px, etc..

user_24305490
Related