fix: layout word break

[araujogui]

Description

Change layout's word break to normal

Validation

Related Issues

Fixes #6711

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 7, 2024 9:47am

[github-actions[bot]]

Lighthouse Results URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 99	🟢 100	🟢 96	🟢 91	🔗
/en/about/previous-releases	🟢 98	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 99	🟢 100	🟢 100	🟢 92	🔗

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.04% (588/653)	76.08% (175/230)	92.18% (118/128)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 :zzz:	0 :x:	0 :fire:	6.004s :stopwatch:

[canerakdas]

It seems to overflow content for low-resolution mobile browsers, for example;

https://nodejs-jow7mncue-openjs.vercel.app/en/blog/release/v20.12.0

IMO it might be better to use xs:break-words for mobile resolution

[bmuenzenmeyer]

yeah - we have dueling solutions here now and we need to slow down and consider our use cases and options

[NiedziolkaMichal]

You guys may consider text-align: justify:

[krave1986]

I would suggest try

word-break: normal;
overflow-wrap: anywhere;
hyphens: auto;

This will both keep the result closest to the current design and bring hyphens to broken words at the end of the lines.

Another benefit would be that we don't need to concern media query for such cases further.

[ovflowd]

Look we also already tried the hyphens approach. Each approach has its own cons and pros and different side effects.

I think is worth going over git history to see what was already attempted and what not and if whatever proposed works well on all scenarios

[tniessen]

I came across this PR after running into this odd issue and trying to fix it myself. For me, personally, justified alignment and normal word break work fine in combination.

[ovflowd]

@araujogui could you go over the considerations that both me, Caner and Brian mentioned? 👀

[araujogui]

Found out that word-break was introduced in #6680, so I think we can assume that until then it was the browsers defaults (normal). The issue solved in #6680 didn't come back with this PR.