Skip to content Skip to sidebar Skip to footer

Spacing Between Some Words Is Just Too Big In Mobile View When Text Is Justified

I made a website and I was ready to launch it but then I noticed that when displayed on mobile certain words in text have just too big spacing between them. Is it possible to someh

Solution 1:

Justifying text is dangerous for exactly this reason. Sometimes you just cannot justify without creating huge gaps in the text. The LaTeX compiler actually prefers extending the line (ignoring e.g. page margins) instead of creating holes.

You could try the hyphens CSS property to avoid gaps, but keep in mind that this feature is new and might not always work. See https://css-tricks.com/almanac/properties/h/hyphenate/

You’d have to adjust the font size or width of your container or edit the text if you absolutely have to avoid these gaps. But keep in mind to test many resolutions, screen widths, and zoom factors. You’re probably too busy to follow this approach, so there is no feasible solution other than left-aligning your text or biting the bullet and live with the gaps.

Solution 2:

If you keep text-align: justify it isn't possible.

Once you have removed it, just use word-spacing

Here some examples

word-spacing: normal;
word-spacing: 5em;
word-spacing: 15px;

https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Post a Comment for "Spacing Between Some Words Is Just Too Big In Mobile View When Text Is Justified"