Bekerja dengan teks dalam CSS: beberapa isu & penyelesaian

1. Beberapa orang tidak menghadapi masalah dengan perenggan dalam bahagian wira. Untuk menangani perkara ini, banyak pembangun membuat div berasingan dan menetapkan lebar tertentu, atau mereka menggunakan lebar atau lebar maks terus pada perenggan. Saya pernah melakukan perkara yang sama sehingga saya menemui unit ch. Unit ini mengira aksara, membolehkan anda menentukan bilangan aksara yang anda inginkan setiap baris.

Dalam contoh di bawah, perenggan dalam bahagian wira diberi lebar maksimum: 64ch (60 hingga 70 aksara disyorkan). Tiada div tambahan diperlukan.

2. Kadangkala, tajuk mungkin mempunyai hanya satu perkataan yang bergerak ke baris seterusnya, atau baris pertama mengandungi lebih banyak teks daripada yang kedua, yang boleh kelihatan tidak seimbang. Kami sering menggunakan
tag atau laraskan lebar untuk membetulkannya. Isu ini juga boleh berlaku dengan perenggan. Contohnya, dalam contoh sebelumnya, baris terakhir perenggan mempunyai teks yang lebih sedikit berbanding baris lain.

Penyelesaian yang kemas untuk masalah ini ialah menggunakan text-wrap: balance;. Dalam contoh berikut, setiap baris perenggan mengandungi jumlah teks yang lebih kurang sama.

Sama seperti keseimbangan, terdapat nilai lain untuk sifat bungkus teks yang dipanggil cantik. Apabila baris terakhir perenggan atau tajuk mengandungi hanya satu perkataan:

Menggunakan pembalut teks: cantik; menambah perkataan lain pada perkataan tunggal pada baris terakhir, jadi ia tidak berdiri sendiri. Sementara sokongan pelayar untuk pembalut teks: keseimbangan; agak bagus, tetapi tidak begitu bagus untuk cantik ?

3. Sifat hiasan teks selalunya kurang digunakan. Mari terokai pelbagai nilai yang boleh diterimanya melebihi nilai lain dan fahami bahawa hiasan teks sebenarnya ialah singkatan untuk empat sifat:

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

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

Satu lagi sifat menarik yang berkaitan dengan hiasan teks ialah text-underline-offset, yang membolehkan anda mencipta ruang antara baris-text-decoration dan teks.

4. Kadangkala, kami memautkan kepingan teks yang panjang dalam blog, yang selalunya membalut ke baris seterusnya. Menggunakan warna latar belakang pada teks terpaut ini boleh kelihatan janggal apabila ia terputus ke baris seterusnya, seperti yang ditunjukkan dalam contoh kami sebelum ini.

Ramai yang menghadapi isu ini apabila menggunakan warna latar belakang dalam tajuk juga. Penyelesaian yang kemas adalah dengan menggunakan box-decoration-break: clone;. Dalam contoh berikut, teks terpaut yang kelihatan janggal sebelum ini kini dipaparkan dengan betul.

5. Walaupun sesetengah isu berterusan sekali-sekala, kami kini boleh menggunakan lejang teks terus dalam CSS. Ya, ia memerlukan awalan, tetapi kita tidak perlu lagi bergantung pada helah bayangan teks seperti sebelum ini, yang merupakan peningkatan yang ketara!

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!

Atas ialah kandungan terperinci Bekerja dengan teks dalam CSS: beberapa isu & penyelesaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!