Wie richtet man Text an beiden Enden mit CSS aus? So richten Sie Text an beiden Enden aus

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man mit CSS eine Textausrichtung an beiden Enden erreicht. So richten Sie Text an beiden Enden aus. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Bei einem kürzlich durchgeführten Projekt ist eine solche Anforderung aufgetreten: (Der Titelteil muss an beiden Enden ausgerichtet sein, unabhängig von der Textmenge)

Wie unten gezeigt:

Damals habe ich nicht viel darüber nachgedacht, stattdessen „ “ zu verwenden, schließlich wollten die Produktstudenten die Wirkung so schnell wie möglich sehen und haben sich nicht getraut vernachlässigen! Aber ich war fassungslos, als ich die zweite Seite erreichte.

Wie im Bild gezeigt:

Es ist offensichtlich, dass ' ' mich nicht mehr befriedigen kann, also habe ich es getan um zu   zu gehen.

Hier eine kurze Erklärung der Unterschiede zwischen mehreren Leerzeichen:

  /*半角的不断行的空白格*/
  /*半角的空格*/
  /*全角的空格*/

Der Seiteneffekt ist da, aber Es wird später wiederholt, als ich es überprüfte. Ich stellte fest, dass diese Schreibweise nicht flexibel ist (obwohl der Inhalt hier festgelegt ist) und zweitens nicht semantisch genug ist. Daher möchte ich es natürlich über CSS lösen. Das Center-Attribut, das wir möglicherweise am häufigsten verwenden, ist das Center-Attribut. Es gibt auch ein anderes Attribut namens justify (an beiden Enden ausgerichtet), das jedoch nicht nach dem verwendet wird Seite wird aktualisiert. Tatsächlich kann

text-align: justify hier allein verwendet werden, vorausgesetzt, der Text muss mehr als zwei Zeilen umfassen und die letzte Zeile wird nicht an beiden Enden ausgerichtet.

Wir müssen also einen leeren Tag-Bereich verwenden.

html:

 <p>职务：<span></span></p>

css:

p{
  width:200px;
  text-align: justify;
}
p span{
  display:inline-block;
  width:100%;
}

Der perfekteste Ansatz besteht hier darin, das Pseudoelement ::after anstelle des leeren Tags zu verwenden.

PS: Nachdem ich die Informationen überprüft habe, habe ich festgestellt, dass text-align-last: justify die Ausrichtung der letzten Zeile an beiden Enden erreichen kann, aber es scheint eine schlechte Kompatibilität zu haben (Safari unterstützt es nicht).

CANIUSE（https://caniuse.com/#search=text-align-last）

Das obige ist der detaillierte Inhalt vonWie richtet man Text an beiden Enden mit CSS aus? So richten Sie Text an beiden Enden aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!