Very long words overflow from containers

[keelanfh]

Very long words overflow from their containers - spotted on Guide Overview pages. This is a very unrealistic scenario but I think there's nothing to lose by adding overflow-wrap: break-word somewhere. There might be other places where this is more likely to happen, with narrower elements?

[keelanfh]

We've now had this popping up in the 'real world' (on smaller mobile phones):

[andybroomfield]

The issue here is that adding overflow-wrap: break-work or simmilar results in long links breaking in the middle of words even when there are spaces, leading to tickets being raised like

What change do you want to make?
There's a problem with hyperlinks and email addresses on the website. They are running over 2 lines splitting words up.

The compromise at BHCC was to do this on email addresses only, and only on small screens:

/* Allow long link titles to wrap on small screens. */
.rich-text__item a[href^="mailto:"] {
  display: inline-block;
  word-break: break-all;
}

/* Reset to default behaviour for larger screens */
@media only screen and (min-width: 768px) {
  .rich-text__item a[href^="mailto:"] {
    display: inline;
    word-break: normal;
  }
}

Beyond this, we would need javascript to add some invisible breaking spaces or wrap long words in classes to apply the break word behaviour.

[andybroomfield]

We could always wrap a <marquee> tag around it :-)

[keelanfh]

Isn't the point of overflow-wrap: break-word that it only breaks when there are no spaces - MDN says:

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

[keelanfh]

so we get (with overflow-wrap: break-word)

then

then

[keelanfh]

whereas word-break: break-all does unpleasant things like this:

[andybroomfield]

Thanks @keelanfh I'll have to check up on that, it was when we had really long links, but the links had spaces in them, that they still broke anywhere. I'll have a review of your suggestion of using overflow-wrap instead, might save us on adding a Javascript hack.

[andybroomfield]

I found out the reason overflow: break-word does not work for BHCC is the presence of the hyphen in the brighton and hove email addresses eg. reallylongemailaddressthatforcescontenttoextendofthescreen@brighton-hove.gov.uk forces the break to happen at the hypen.

However the above fix should be good as a general fix for everyone else.

[andybroomfield]

overflow-wrap: anywhere seems to actully work better though, and still breaks at spaces for non long links, so maybe that one is better?

[keelanfh]

I found out the reason overflow: break-word does not work for BHCC is the presence of the hyphen in the brighton and hove email addresses eg. reallylongemailaddressthatforcescontenttoextendofthescreen@brighton-hove.gov.uk forces the break to happen at the hypen.

Interesting, I suppose the question is whether this is bad? I can see arguments for it being logical to do this if there needs to be a space, but I suppose it would be annoying in the case that the whole email address could fit if put on a new line. There are other councils with hyphens in email addresses too.

overflow-wrap: anywhere seems to actully work better though, and still breaks at spaces for non long links, so maybe that one is better?

my concern with this - based on the diagram on MDN - is that it will force breaks in cases where the container doesn't have a fixed width. I can't think of an example of this in LGD immediately - most of the container widths are set in relation to their parents - but it's possible that there are some.

[markconroy]

GitHub seems to use break-word for this.