Viewport width broken by long url-like strings that don't wrap

Just to be clear, if the string has white spaces or hyphens (i.e. '-') wrap works.

But a string such as the following won't wrap and breaks the viewport when the system tries to fit that string on one line while in portrait mode on a mobile.

/aaaaa/bbbbb/ccccc/ddddd/eeeee/fffff/ggggg/hhhhh/iiiii

And here's a test done on https://simplytest.me/

A partial solution: adding inline CSS, for example: word-wrap: break-word;.

But I'm wondering where the best place is to fix this?

• Does it make sense for the theme to fix this out-of-the-box and in broad fashion?
• Or is this kind of issue best solved with custom CSS on a case by case basis?

On my website, I am using 7.x-4.2+13-dev - which is the latest dev. I just loaded branch 7.x-4.x on simplytest.me. I believe that is the latest dev, right?

In both cases when viewing the test article on an iPhone 6 using mobile Safari, the string /aaaaa/bbbbb/ccccc/ddddd/eeeee/fffff/ggggg/hhhhh/iiiii doesn't wrap as shown in the capture in #3.

I'm guessing the result you got was by squeezing your browser, right? I get properly wrapped string when I squeeze my browser (FF). But the browser is not telling the whole truth.

Can you please repeat your test on simplytest.me and then visit that page with your smart phone? I'm pretty sure you will see something resembling the capture in #3.

Applying both of your suggestions works: the container is no longer broken and where long unbreakable strings occur, the viewport scrolls horizontally.

I agree with you when you write not sure if they are generally good. Although this fix is much better than a broken container, I don't feel completely comfortable with this solution because it appears to be somewhat fragile?

Getting the wrap to properly work would of course be ideal and more scalable as far as future releases are concerned.

Thanks very much for your help on this!

Ok, not fragile then; that's good. I misread your not sure if they are generally good.

By fragile I was underlying the fact that the proposed solution doesn't directly fix the non-wrapping strings but it does stop them from breaking the container. So damages are 'contained', which is great.

Now does it make sense to build those 2 changes into the code of Basic ? With a bit of guidance, I'll help with the patch.

Thanks Leah, that's a nice addition to the mix.

I've played with @include word-wrap(normal) and @include word-wrap(break-word). The former does nothing for long unbreakable strings. The latter does but the result isn't always ideal.

Do you know of a way to break on predefined characters e.g. '/' ?

p.s. Thanks for the update Joel.

lol, that's a nice word :-). Adding link to similar issue for Bartik in D8.

In the end, I realize that the theme, any theme, is unlikely to be able to solve this problem out-of-the-box - which is a complex one at that.

So what's the solution? I would say: adopting an appropriate strategy for dealing with the occurrence of long strings.

In my use-case, the long strings that are troublesome are usually URLs (absolute, relative or partial) or function names e.g. theme_commerce_price_formatted_components().

Here are 3 elements of a sound strategy.

• Manually replacing https://www.drupal.org/node/2643324 by something shorter such as drupal.org/node/2643324.
• Manually inserting Zero-width space (​) in long function names e.g. adopting_​an_​appropriate_​strategy_​for_​dealing_​with_​the_​occurrence_​of_​long_​strings()
• Use #content { overflow-x: auto; } as a safety net.

With just these 3 elements, I'm able to solve most of my issues with one line of CSS. Not that css properties such as word-wrap or hyphens don't work - they do. But I would venture to say that that represents more work than coming up with a simple strategy. I would keep those for extreme and very bothersome cases that cannot be solved by strategy alone.

In the end, it all boils down to design, mobile-first design.