CSS でのテキストの操作: いくつかの問題と解決策

1. ヒーローセクションの段落に関する問題に遭遇したことがない人はほとんどいません。これに対処するために、多くの開発者は別の div を作成して特定の幅を割り当てるか、幅または最大幅を段落に直接適用します。私もch単位を知るまではそうしていました。このユニットは文字数をカウントするので、1 行あたりの文字数を指定できます。

以下の例では、ヒーローセクションの段落に max-width: 64ch が指定されています (60 ～ 70 文字を推奨)。追加の div は必要ありません。

2. 場合によっては、見出しに 1 つの単語だけが次の行に移動したり、最初の行に 2 行目より多くのテキストが含まれたりして、バランスが悪く見えることがあります。
をよく使用します。これを修正するには、タグを付けるか幅を調整します。この問題は段落でも発生する可能性があります。たとえば、前の例では、段落の最後の行のテキストが他の行よりも少なくなります。

この問題に対する適切な解決策は、text-wrap:balance; を使用することです。次の例では、段落の各行にほぼ同じ量のテキストが含まれています。

バランスと同様に、text-wrap プロパティには pretty と呼ばれる別の値があります。段落または見出しの最後の行に単語が 1 つだけ含まれている場合:

テキストラップの使用: かなり;最後の行の単独の単語に別の単語を追加するため、単独では存在しません。ブラウザーは text-wrap:balance をサポートしていますが、かなり良いですが、かなり良いというわけではありません?

3. テキスト装飾プロパティは十分に活用されていないことがよくあります。受け入れられるさまざまな値を超えて調べて、text-decoration が実際には 4 つのプロパティの短縮形であることを理解しましょう。

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

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

text-decoration に関連するもう 1 つの興味深いプロパティは text-underline-offset です。これを使用すると、text-decoration-line とテキストの間にスペースを作成できます。

4. ブログでは長いテキストをリンクすることがありますが、多くの場合、次の行に折り返されます。前の例で示したように、このリンクされたテキストに背景色を適用すると、次の行に分割されると不自然に見える可能性があります。

見出しに背景色を使用する場合にも、多くの人がこの問題に遭遇します。適切な解決策は、box-decoration-break: clone; を使用することです。次の例では、以前はぎこちなく見えていたリンクされたテキストが正しく表示されるようになりました。

5. 時々いくつかの問題が残りますが、CSS で直接 text-ストロークを使用できるようになりました。はい、プレフィックスが必要ですが、以前のようにテキストシャドウのトリックに頼る必要はなくなりました。これは大幅な改善です!

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!

以上がCSS でのテキストの操作: いくつかの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。