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

Lighthouse Results

Unit Test Coverage Report

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

Unit Test Report

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

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

You guys may consider text-align: justify:

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.

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

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.

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

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.