How to control word-spacing in justified text with CSS?

Question

I have 2 blocks of text that are pretty small (just under a paragraph each) and they really look better justified but the problem is that `text-align: justify;` sometimes adds really large spaces and makes the text somewhat ugly (the opposite effect, obviously).Is it possible to more finely tune the word spacing with CSS so that this doesn't happen?

Answer 1

What you are looking for is the text-justify property, which can be used along with text-align: justify;

The content below gives you the details about values that can be used with the text-justify property (copied from the MOZ page). You are probably looking for either inter-word or inter-character.

Keep in mind some browsers may not support it. You may check browser support on the Caniuse page.

none

The text justification is turned off. This has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason.

auto

The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., English, CJK languages, etc.). This is the default justification used if text-justify is not set at all.

inter-word

The text is justified by adding space between words (effectively varying word-spacing), which is most appropriate for languages that separate words using spaces, like English or Korean.

inter-character

The text is justified by adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like Japanese.

distribute 

Exhibits the same behaviour as inter-character; this value is kept for backwards compatibility.

Answer 2

Not that I reallu use justified text. there is some CSS that will help in adjusting the gap.

https://css-tricks.com/almanac/properties/t/text-justify/

https://graphicdesign.stackexchange.com/questions/11476/how-to-control-word-spacing-in-justified-text-with-css

https://tympanus.net/codrops/css_reference/text-justify/