Koenman Koenman - 1 year ago 43
CSS Question

word-spacing has a lot of whitespacing

I'm having a hard time with Word-spacing on a clients wordpress website. They have a piece of content in flexbox but with the word-spacing is just messed up and resizing the website doesn't make it better at all!

screenshot from website

I'm getting on the right path slowly, but i just can't seem to figure it out on my own at the moment. Can somebody please explain why the word spacing is so messed up?

This is the code from the left box (they used a damm visual creator plugin VC)

[/vc_column_text][vc_separator type="transparent" up="5" down="0"]
<p style="text-align: justify;">SpaanIt geeft incompany-groepstraining
en privéles in het Spaans en Italiaans op maat. In overleg wordt het
huidige taalvaardigheidsniveau bepaald en waar de nadruk op komt te
liggen tijdens de taallessen. Dat kan bijvoorbeeld Spaanse of Italiaanse
spreekvaardigheid, schrijfvaardigheid en grammatica zijn. Daarnaast
besteed SpaanIt aandacht aan cultuurverschillen en jargon.</p>

<p style="text-align: justify;">Ook biedt SpaanIt één-op-één
VIP-arrangementen voor lessen Spaans of Italiaans. Er wordt dan van ’s
morgens tot ’s avonds intensief op een afwisselende manier gewerkt aan
de taalvaardigheid. VIP-arrangementen vinden bij voorkeur plaats op een
speciale locatie inclusief lunch en diner.</p>
[/vc_column_text][vc_separator type="transparent" up="15" down="0"]
[button size="small" icon="" target="_self" font_style="normal"
font_weight="500" text_align="center" text="lees meer"
link="http://www.spaanit.nl/bedrijven/" hover_color="#2f9738"
border_color="#f9af00" hover_border_color="#2f9738" margin="20px 10px
20px 5px" border_radius="25" color="#f9af00" background_color="#ffffff"
width="1/4"][vc_single_image image="18394" img_size="260x250"
qode_css_animation=""][vc_separator type="transparent" thickness="5"]
[vc_column_text css=".vc_custom_1454448677436{padding-top: -20px

I already tried just fixing the word-spacing

word-spacing: normal !important;

But without result.

Answer Source

The reason there are so many whitespaces in the content is the fact that the text-align property of the element is set to justify, which makes sure that the rightmost and leftmost edges of each row of a text element are aligned perfectly.

You should either supplant text-align: justify; with text-align: left; or slightly alter the content so that it fits better with less whitespaces.