Prevent summary list from wrapping mid-word for most browsers

[MalcolmVonMoJ]

As discussed with Colin Rotherham

PR #1169 added in some CSS:

• word-break: break-word;, followed by
• word-break: break-all;

word-break: break-word; is the favoured behaviour, but isn't fully supported.
word-break: break-all; is the fallback behaviour, it sometimes results in unfavourable wrapping mid-word.

The order for this CSS needs to be changed to, otherwise the less favourable break-all takes precedence.

word-break: break-all;
word-break: break-word;

caniuse said:

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value

The implication here being that it is not fully supported, so word-break: break-all; is still needed as a fallback.

Below screenshot shows the difference in Google Chrome, note the wrapping of the first column.

[NickColley]

@MoJ-Longbeard happy to accept this but would be great to see examples of the impact of these changes if you can?

We also will need a CHANGELOG entry to describe this fix (make sure to put recognition for yourself as part of the notes too please 👍 )

[MalcolmVonMoJ]

@NickColley
Done - I think.

[NickColley]

Suggested change

	- Update \_summary-list.scss
	- Pull Request Title goes here
	Description goes here (optional)
	([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
	- Minor CSS code change to prevent wrapping mid-word for most browsers

[NickColley]

It's not super obvious but we try and keep the template around for contributors in the future to copy and paste.

Also I think the sentence below 'update summary list' is a more descriptive title we can use.

Happy to do this for you when it gets merged, let me know.

[MalcolmVonMoJ]

@NickColley , sure. Please do that for me, happy with the description change. I'm still getting to grips with GitHub etc...

[NickColley]

I've cleaned up the branch for you :)

Going to wait for an approval from @colinrotherham since he's been thinking about this a lot too.

[colinrotherham]

For anyone else looking, we originally referred to https://caniuse.com/#search=word-break

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

And the non-standard comment by MDN:

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* non-standard */ 

We made sure that the standard is preferred when available.

But… thanks to research by @MoJ-Longbeard we now know that break-word has better wrapping behaviour and is less likely to break up words, unless absolutely necessary.

We also found it's quite clearly listed in the latest CSS Text Module Level 3 working draft from December 2018: https://www.w3.org/TR/css-text-3/#overflow-wrap-property 😊

@NickColley So this is a 👍 from me!

[hannalaakso]

LGTM, thanks all 👏