2016-07-04 9 views
0

Ich habe eine harte Zeit mit Word-Abstand auf einem Kunden Wordpress-Website. Sie haben ein Stück Inhalt in der flexbox, aber mit dem Wort-Abstand ist nur vermasselt und die Größe der Website macht es überhaupt nicht besser!Wortabstand hat eine Menge Whitespacing

screenshot from website

Ich bin auf dem richtigen Weg immer langsam, aber ich kann einfach nicht scheinen, um es herauszufinden auf eigene Faust im Moment. Kann jemand bitte erklären, warum der Wortabstand so durcheinander ist?

Dies ist der Code aus dem linken Feld (sie einen damm visuellen Schöpfer Plugin VC verwendet)

<h4>Bedrijfsleven</h4> 
[/vc_column_text][vc_separator type="transparent" up="5" down="0"]  
[vc_column_text] 
<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" 
hover_background_color="#ffffff"][/vc_column_inner][vc_column_inner 
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 
!important;}"] 

Ich habe bereits versucht nur das Wort-Abstand

word-spacing: normal !important; 

aber ohne Ergebnis zu fixieren.

+2

Ihre Wörter sind ungleichmäßig verteilt, da Sie 'text-align: justify' verwenden. Gerechtfertigte Texte werden so verteilt, dass das erste und das letzte Wort einer Zeile an der linken bzw. rechten Kante ausgerichtet sind. Der Rest der Wörter in der Zeile wird gleichmäßig verteilt. Jede Zeile wird als separate Entität behandelt, was bedeutet, dass der Wortabstand zwischen den Zeilen unterschiedlich ist. TL; DR benutze 'text-align: left;' – Turnip

Antwort

1

Der Grund gibt es so viele Leerzeichen im Inhalt ist die Tatsache, dass die text-align Eigenschaft des Elements auf justify festgelegt ist, die sicherstellt, dass die rechten und linken Kanten jeder Zeile eines Textelements perfekt ausgerichtet sind.

Sie sollten entweder text-align: justify; durch text-align: left; ersetzen oder den Inhalt leicht ändern, so dass es besser mit weniger Leerzeichen passt.

3

Dieser Raum nicht, weil white spacing sondern weil Sie Inline-Stil haben text-align:justify; Sie es aus p element entfernen sollte, oder Sie können diese es

außer Kraft setzen zu Ihrem Stil hinzufügen
text-align: initial !important; 
+0

"left" stellte sich als die beste Lösung für mich heraus, aber trotzdem danke ich dir – Koenman