Wie stelle ich die Ausrichtung beider Enden in CSS ein? Eine kurze Analyse verschiedener Methoden

Beim Website-Layout ist die Textausrichtung ein sehr wichtiger Teil. Normalerweise verwenden wir die Links-, Mittel- und Rechtsausrichtung. In einigen Fällen müssen wir jedoch eine beidseitige Begründung verwenden, die auch als „beidseitige Begründung“ bezeichnet wird. Durch Blocksatz wird der Text gleichmäßig verteilt und die visuelle Wirkung verbessert. Auch wenn die Rechtfertigung im modernen Webdesign immer seltener vorkommt, ist sie immer noch eine sehr nützliche Technik, wenn Sie sie brauchen.

Es gibt viele Möglichkeiten, an beiden Enden eine Ausrichtung zu erreichen. In diesem Artikel behandeln wir einige der gängigsten Techniken, von grundlegendem CSS bis hin zu einigen fortgeschrittenen Techniken.

Grundlegende CSS-Tipps

Grundlegende CSS-Tipps sind der einfachste, aber manchmal auch beste Weg, eine Ausrichtung zu erreichen. Mit der text-align-Eigenschaft können wir den Text so einstellen, dass er ausgerichtet wird, wie unten gezeigt:

p {
  text-align: justify;
}

Diese einfache CSS-Regel richtet den Absatztext an beiden Enden aus. Dies kann in manchen Situationen zu sehr guten Ergebnissen führen, in anderen jedoch möglicherweise nicht so gut. Dies liegt daran, dass beim Blocksatz von CSS jede Textzeile die gesamte Breite ausfüllt, was zu ungleichmäßigen Abständen führt. Das sieht vielleicht nicht schön aus, aber wir haben ein paar Möglichkeiten, das Problem zu beheben. Eine einfache Möglichkeit, dies zu tun, besteht darin, das Kerning über die Eigenschaft „letter-spacing“ zu erhöhen:

p {
  text-align: justify;
  letter-spacing: 2px;
}

Dadurch werden 2 Pixel Abstand zwischen dem Absatztext hinzugefügt. Allerdings kann dies dazu führen, dass einige Wörter in mehrere Wörter aufgeteilt werden und an unpassenden Stellen Zeilenumbrüche erfolgen. Wenn Ihr Text jedoch überwiegend auf Englisch verfasst ist, stellt dies kein großes Problem dar. Wenn Ihr Text jedoch auf Chinesisch ist, möchten Sie möglicherweise die Unterschneidung zwischen Chinesisch und Englisch erhöhen.

Um zu vermeiden, dass Wörter aufgebrochen werden, können wir eine andere CSS-Eigenschaft verwenden: text-justify. text-justify ist ein Teil von CSS3, der steuert, wie Textzeilen ausgerichtet werden. Für dieses Attribut stehen drei Werte zur Verfügung: auto, none und inter-word. auto ist der Standardwert und Zeilen werden nach den Typen links, rechts und zentriert ausgerichtet. Inter-Wort verwendet den Abstand zwischen Wörtern und den Abstand zwischen Wörtern, um eine Ausrichtung an beiden Enden zu erreichen. Natürlich kann es vorkommen, dass Sie unregelmäßige Leerzeichen sehen, insbesondere in der Mitte von Wörtern. Dies wird normalerweise durch Unterschiede zwischen verschiedenen Sprachen verursacht.

Ein weiterer Trick, um Wörter intakt zu halten, ist der Zeilenumbruch. Dadurch werden lange Wörter an den entsprechenden Stellen abgebrochen und Wortspaltungen vermieden. Sie können die folgenden Stilregeln verwenden:

p {
   text-align: justify;
   word-break: break-all;
}

Dadurch werden Wörter überall umgebrochen und der Text an den Rändern ausgerichtet. Sie ist komplexer als die Eigenschaft „Buchstabenabstand“, aber für Szenarien, in denen englischer Text ausgerichtet werden muss, ist sie eine zu berücksichtigende Option.

Erweiterte CSS-Tipps

Die oben genannten CSS-Tipps eignen sich hervorragend für einfache Webprojekte. Wenn Sie den Text jedoch gleichmäßig verteilen möchten, ohne die Wörter oder Textformatierungen zu unterbrechen, benötigen Sie möglicherweise einige fortgeschrittene Techniken.

Verteilen Sie untergeordnete Elemente mithilfe von Flexbox gleichmäßig innerhalb eines Containers.

Flexbox-Layout ist ein neues CSS-Layoutsystem, das Ihnen eine bessere Kontrolle und ein besseres Layout Ihrer Website ermöglicht. Wir können die Flexbox-Funktion moderner Browser nutzen, um eine Ausrichtung auf beiden Seiten zu erreichen. Um das Flexbox-Layout verwenden zu können, müssen wir display:flex auf den Container einstellen.

.container {
  display: flex;
  justify-content: space-between;
}

Diese Stilregel sorgt dafür, dass alle Elemente im Container gleichmäßig verteilt werden, während das eigene Format beibehalten wird. Der Wert „space-between“ stellt einen angemessenen Leerraum zwischen untergeordneten Elementen innerhalb des Containers sicher und sorgt so für eine Ausrichtung. Dieser Ansatz hat auch den Vorteil, dass er sich durch Responsive Design an unterschiedliche Bildschirmgrößen anpassen lässt.

Verwenden Sie CSS Grid, um untergeordnete Elemente gleichmäßig im Container zu verteilen.

CSS Grid ist ein weiteres modernes CSS-Layoutsystem, das flexibler und leistungsfähiger als Flexbox ist. Wir können Grid verwenden, um eine Ausrichtung an beiden Enden zu erreichen:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

Diese Regel bewirkt eine Menge Dinge. Zunächst wird aus dem Container ein Raster erstellt und die Anzahl der Spalten für das sich wiederholende Raster sowie die minimale und maximale Breite jeder Spalte festgelegt. Als nächstes definiert es einen Abstandshalter, um untergeordnete Elemente zu trennen. Schließlich wird die Eigenschaft „justify-items“ festgelegt, um die untergeordneten Elemente gleichmäßig zu verteilen, und die Eigenschaft „align-items“, um alle untergeordneten Elemente im Container vertikal zu zentrieren. Diese Methode erfordert professionelle CSS-Kenntnisse, die Ergebnisse sind jedoch sehr effektiv.

Fazit

Obwohl die Rechtfertigung nicht ein unverzichtbares Element in jedem Website-Design ist, handelt es sich um eine sehr nützliche Technik, die visuelle Effekte verbessern kann. Von der einfachen Verwendung der text-align-Eigenschaft bis hin zur erweiterten Verwendung von Flexbox und Grid-Layout untersuchen wir in diesem Artikel verschiedene Techniken, um eine Ausrichtung zu erreichen. Unabhängig davon, was Ihre Website benötigt, können diese Tipps einen großen Beitrag zur Verbesserung der Lesbarkeit und Ästhetik Ihrer Website leisten.

Das obige ist der detaillierte Inhalt vonWie stelle ich die Ausrichtung beider Enden in CSS ein? Eine kurze Analyse verschiedener Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!