Arbeiten mit Text in CSS: einige Probleme und Lösungen

1. Nur wenige Menschen haben noch nie Probleme mit dem Absatz im Heldenbereich gehabt. Um dieses Problem zu beheben, erstellen viele Entwickler ein separates Div und weisen ihm eine bestimmte Breite zu oder wenden width oder max-width direkt auf den Absatz an. Ich habe das Gleiche gemacht, bis ich die ch-Einheit entdeckt habe. Diese Einheit zählt Zeichen, sodass Sie angeben können, wie viele Zeichen Sie pro Zeile wünschen.

Im folgenden Beispiel erhält der Absatz im Heldenbereich die maximale Breite: 64 Kanäle (60 bis 70 Zeichen werden empfohlen). Es ist kein zusätzliches Div erforderlich.

2. Manchmal enthält eine Überschrift nur ein Wort, das in die nächste Zeile verschoben wird, oder die erste Zeile enthält mehr Text als die zweite, was unausgewogen wirken kann. Wir verwenden oft das
Markieren Sie das Problem oder passen Sie die Breite an, um das Problem zu beheben. Dieses Problem kann auch bei Absätzen auftreten. Im vorherigen Beispiel enthält die letzte Zeile des Absatzes beispielsweise weniger Text als die anderen Zeilen.

Eine nette Lösung für dieses Problem ist die Verwendung von text-wrap: balance;. Im folgenden Beispiel enthält jede Zeile des Absatzes ungefähr die gleiche Textmenge.

Ähnlich wie bei Balance gibt es einen weiteren Wert für die Textumbrucheigenschaft namens Pretty. Wenn die letzte Zeile eines Absatzes oder einer Überschrift nur ein Wort enthält:

Textumbruch verwenden: hübsch; fügt dem einzelnen Wort in der letzten Zeile ein weiteres Wort hinzu, damit es nicht allein steht. Während Browser-Unterstützung für Textumbruch: Balance; ist ziemlich gut, aber für hübsch ist es nicht so gut ?

3. Die Textdekorationseigenschaft wird oft nicht ausreichend genutzt. Lassen Sie uns die verschiedenen Werte untersuchen, die es über keine hinaus annehmen kann, und verstehen, dass Textdekoration eigentlich eine Abkürzung für vier Eigenschaften ist:

p {
    /*
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
}

Eine weitere interessante Eigenschaft im Zusammenhang mit der Textdekoration ist text-underline-offset, mit der Sie einen Abstand zwischen der Textdekorationslinie und dem Text schaffen können.

4. Manchmal verlinken wir in Blogs lange Textabschnitte, die oft in die nächste Zeile umbrechen. Das Anwenden einer Hintergrundfarbe auf diesen verknüpften Text kann unangenehm aussehen, wenn er in die nächste Zeile umbricht, wie in unserem vorherigen Beispiel gezeigt.

Viele stoßen auch auf dieses Problem, wenn sie Hintergrundfarben in Überschriften verwenden. Eine nette Lösung ist die Verwendung von box-decoration-break: clone;. Im folgenden Beispiel wird der verlinkte Text, der zuvor seltsam aussah, jetzt korrekt angezeigt.

5. Obwohl einige Probleme gelegentlich bestehen, können wir Textstrich jetzt direkt in CSS verwenden. Ja, es erfordert ein Präfix, aber wir müssen uns nicht mehr wie zuvor auf Textschatten-Tricks verlassen, was eine erhebliche Verbesserung darstellt!

6. The last feature for today is line-clamp. It also requires a prefix, yet it's now widely used. This is commonly seen in cards for various blogs or articles. There are many ways to determine how many lines of text to show on a card. I used to control this using a custom data attribute and JavaScript, specifying the number of characters to display. However, this can be done more easily with line-clamp.

The code block below compiles all the topics discussed, making it convenient to search for and research other uses, browser support, and more.

p {
    max-width: 64ch;
    text-wrap: balance; /* or pretty */
    /**********************/
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    /**********************/
    /*
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;

    /* shorthand */
    text-decoration: underline wavy red 2px;
    box-decoration-break: clone;
    text-underline-offset: 3px;
}

h1 {
    -webkit-text-stroke-color: #333;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
}

That's all for today. Stay well, and goodbye!

Das obige ist der detaillierte Inhalt vonArbeiten mit Text in CSS: einige Probleme und Lösungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!