Wie steuere ich den Wortabstand in begründetem Text mit CSS?

9

Ich habe 2 Textblöcke, die ziemlich klein sind (jeweils knapp unter einem Absatz) und die wirklich besser gerechtfertigt aussehen, aber das Problem ist, dass text-align: justify;manchmal sehr große Leerzeichen hinzugefügt werden und der Text etwas hässlich wird (der gegenteilige Effekt ist offensichtlich).

Ist es möglich, den Wortabstand mit CSS feiner abzustimmen, damit dies nicht passiert?

TehMacDawg
quelle

Antworten:

9

CSS TEXT-JUSTIFY

Diese Nur-IE- Eigenschaft bietet eine Verfeinerung des in der text-alignEigenschaft verwendeten "Rechtfertigungs" -Werts . In der Tat muss der "Rechtfertigungs" -Wert festgelegt werden, damit diese Eigenschaft text-justifyeine Wirkung hat.

text-justify bietet ein feines Maß an Rechtfertigungskontrolle über den beigefügten Inhalt und ermöglicht eine Vielzahl ausgefeilter Rechtfertigungsmodelle, die in verschiedenen Sprachschreibsystemen verwendet werden.

Beispiel

<p style="text-align: justify; text-justify: newspaper;">
    This is Newspaper justified content
</p>

Mögliche Werte

VALUE                   DESCRIPTION
----------------------  ---------------------------------------------------------------------
auto                    The browser will determine the appropriate justification algorithm
                        to use

distribute              Justification is handled similarly to the newspaper value,
                        but this version is optimized for East Asian content
                        (especially the Thai language.)
                        In this justification method, the last line is not justified.

distribute-all-lines    Behavior and intent for this value is the same as with the
                        distribute value, but the last line is also justified.

inter-cluster           Justifies content that does not have any inter-word spacing
                        (such as with many East Asian languages.)

inter-ideograph         Used for justifying blocks of ideographic content.
                        Justification is achieved by increasing or decreasing spacing
                        between ideographic characters and words as well.

inter-word              Justification is achieved by increasing the spacing between words.
                        It is the quickest method of justification and does not justify
                        the last line of a content block.

newspaper               Spacing between letters and words are increased or decreased
                        as necessary.

In der IE-Referenz heißt es: "Es ist die raffinierteste Form der Rechtfertigung für lateinische Alphabete."

Quelle: http://www.css3.com/css-text-justify/

Hoffe das hilft!

Marcus Mangelsdorf
quelle
Dies scheint jetzt von anderen Browsern unterstützt zu werden .
Mndrix
3

Zusätzlich zur Verwendung text-justify, die derzeit nur vom IE unterstützt zu werden scheint, sollten Sie eine Silbentrennung mit expliziten Silbentrennungshinweisen &shy;und / oder einer browserbasierten automatischen Silbentrennung hinzufügen, die mit geeigneten hyphens: autoBrowserpräfixen verwendet wird oder einen JavaScript-basierten Silbenträger wie Hyphenator.js verwendet. Durch die Silbentrennung wird der Bedarf an zusätzlichen Begründungsabständen häufig erheblich verringert.

Jukka K. Korpela
quelle
The text-justify property is supported in all of the major browsers., Quelle: w3schools.com/cssref/css3_pr_text-justify.asp und Text-Align, w3schools.com/cssref/pr_text_text-align.asp
3
@AbdiasSoftware, die Seite ist gefälscht - ein weiterer Beweis dafür, dass w3schools Mist sind, siehe w3fools.com (Die w3schools-Seite enthält "PlayIt" -Schaltflächen, mit denen Sie ziemlich schnell feststellen können, dass ihre Informationen falsch sind.)
Jukka K. Korpela
Sie sind manchmal etwas veraltet, aber ich würde sie nicht als falsch bezeichnen :-) Hier ist sowieso eine andere Quelle: reference.sitepoint.com/css/text-align
@AbdiasSoftware, die andere Quelle handelt von einer anderen Eigenschaft. Die Website reference.sitepoint.com wird überhaupt nicht erwähnt text-justify. Aber es tut mir leid, dass ich anfangs darüber geschrieben habe text-align-justifyanstatt text-justify(jetzt behoben). Die Einstellung text-align: justifyist hier natürlich impliziert; Die Frage ist, ob die Art der Rechtfertigung kontrolliert werden kann.
Jukka K. Korpela
Hm, gut interessant. Ich werde noch etwas recherchieren. Vielen Dank. Es ist 4 Uhr morgens hier, mein Urteil ist