Dua sifat CSS untuk memangkas ruang kotak teks

Ciri -ciri

dan

CSS membolehkan pemaju mengawal jumlah ruang kosong di atas baris pertama teks dan di bawah baris terakhir teks dalam kotak teks. Kekosongan ini akan menjadikan ketinggian menegak kotak teks lebih besar daripada ketinggian kandungannya. text-box-trim text-box-edge Blank ini dipanggil

memimpin

(jarak garis), dan ia muncul di atas dan di bawah semua baris teks (sebenarnya dua setengah baris jarak) untuk meningkatkan kebolehbacaan teks. Tetapi kita hanya mahu ia muncul di antara baris teks, bukan? Kami tidak mahu ia muncul di bahagian atas dan bawah kotak teks kerana ia mempengaruhi margin, mengisi, jurang, dan jarak lain. Sebagai contoh, jika kita melaksanakan margin 50px, tetapi jarak garis meningkat sebanyak 37px, akan ada jumlah ruang 87px secara keseluruhan. Kemudian kita perlu menyesuaikan margin hingga 13px untuk membuat ruang 50px dalam amalan.

Sebagai seorang lelaki sistem reka bentuk, saya cuba mengekalkan konsistensi sebanyak mungkin dan menggunakan beberapa penanda yang mungkin, yang membolehkan saya menggunakan pemilih saudara bersebelahan () untuk membuat peraturan yang sama seperti ini:

Kaedah ini masih menyusahkan kerana anda masih perlu melakukan pengiraan (walaupun kurang pengiraan). Walau bagaimanapun, menggunakan sifat

dan

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

, 50px yang ditakrifkan dalam CSS secara visual bermakna 50px:

text-box-trim text-box-edge Penafian:

dan hanya boleh diakses melalui bendera ciri Chrome 128 dan Safari 16.4, serta pratonton teknologi Safari tanpa bendera ciri. Lihat Caniuse untuk maklumat sokongan penyemak imbas terkini. text-box-trim Mula dari text-box-edge

adalah harta CSS yang mengaktifkan pemangkasan kotak teks. Ia tidak mempunyai tujuan lain dengan sendirinya, tetapi ia memberi kita pilihan untuk memulakan, mengakhiri, memulakan dan mengakhiri atau mengakhiri: text-box-trim

text-box-trim NOTA:

Dalam penyemak imbas web yang lebih tua, anda mungkin perlu menggunakan nilai yang lebih tua

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

dan bukan nilai

baru. Dalam pelayar web yang lebih tua, anda mungkin perlu menggunakan . Malangnya, tidak ada rujukan untuk ini, jadi anda hanya perlu melihat apa yang berfungsi. start/end/both Sekarang, di mana anda mahu memangkas? trim-start/trim-end/trim-both top/bottom/both anda mungkin ingin tahu apa yang saya maksudkan. Pertimbangkan bahawa huruf tipografi mempunyai banyak puncak.

Terdapat ketinggian x, yang menandakan bahagian atas huruf "x" dan watak -watak kecil yang lain (tidak termasuk lanjutan atau lanjutan atas), ketinggian huruf besar, yang menandakan bahagian atas huruf besar (sekali lagi, tidak termasuk lanjutan atau lanjutan atas), dan garis dasar huruf, yang menandakan bahagian bawah kebanyakan huruf (tidak termasuk lanjutan atau lanjutan yang lebih rendah). Sudah tentu, terdapat juga ketinggian mengangkat dan ketinggian penurunan.

Anda boleh memangkas kosong di antara ketinggian x, ketinggian modal, atau ketinggian menaik dan kelebihan "naik" kotak teks (di mana scribing atas bermula), dan kosong di antara garis asas atau ketinggian skrip yang lebih rendah dan kelebihan "bawah" (jika text-underline-position ditetapkan ke under, kemudian di mana garis bawah bermula).

Jangan memotong apa -apa

text-box-edge: leading bermaksud bahawa semua jarak baris dimasukkan; Ini adalah sama seperti text-box-trim: none atau menghilangkan text-box-trim dan text-box-edge sepenuhnya. Anda juga boleh menggunakan text-box-trim: trim-start untuk mengehadkan pemangkasan kelebihan bawah atau menggunakan text-box-trim: trim-end untuk mengehadkan pemangkasan kelebihan atas. Ya, ada banyak cara untuk tidak melakukan ini sama sekali!

Penyemak imbas web yang lebih baru telah menyimpang dari draf kerja spesifikasi CSSWG dengan memadam nilai leading dan menggantikannya dengan auto walaupun "tidak menerbitkan (belum)" amaran (*mengangkat bahu*).

Sudah tentu, text-box-edge menerima dua nilai (arahan mengenai kelebihan atas, dan kemudian arahan mengenai kelebihan bawah). Walau bagaimanapun, auto mesti digunakan secara berasingan.

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Saya dapat menerangkan semua senario auto yang berfungsi, tetapi tidak ada yang sah. Saya fikir semua yang kita mahukan adalah dapat menetapkan tepi atas atau bawah ke auto dan menetapkan kelebihan lain kepada sesuatu yang lain, tetapi itulah yang tidak dilakukannya. Ini adalah soalan, tetapi kami akan menggali lebih mendalam tidak lama lagi.

potong bahagian atas lif dan/atau bahagian bawah bahagian bawah

text Jika digunakan sebagai nilai pertama, bahagian di atas akan dipangkas; (Saya fikir anda mahu ia menjadi auto, tetapi tidak akan.)

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Perlu diperhatikan bahawa pengukuran ketinggian dan ketinggian yang lebih rendah datang dari fon itu sendiri (atau tidak!), Jadi text boleh menjadi sangat pemilih. Sebagai contoh, untuk fon arial, ketinggian kenaikan termasuk diakritik, ketinggian kejatuhan termasuk penurunan, dan untuk fon fravances, ketinggian kejatuhan termasuk diacritik, saya tidak tahu apa ketinggian kenaikan termasuk. Oleh itu, terdapat perbincangan mengenai penamaan semula text ke from-font.

perjalanan hanya di atas ketinggian modal

untuk memangkas ketinggian modal:

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

ingat, nilai yang tidak diisytiharkan lalai kepada text, bukan auto (seperti yang ditunjukkan di atas). Jadi untuk memilih untuk tidak memangkas tepi bawah, anda perlu menggunakan trim-start bukan trim-both:

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

Perjalanan ketinggian kes atas dan di bawah garis asas

untuk memangkas ketinggian kes atas dan di bawah garis dasar huruf:

/* 当 <element> 后面跟着 <h1> 时 */
<element> + h1 {
  margin-bottom: 13px; /* 而不是 margin-bottom: 50px; */
}</element>
</h1></element>

Dengan cara ini, ketinggian topi ke pilihan asas bagi tetapan trim menegak Figma tidak betul -betul ini. Walau bagaimanapun, mod pembangunannya menjana kod CSS dengan nama atribut usang (leading-trim dan text-edge) dan nilai -nilai usang (top dan bottom).

perjalanan hanya di atas ketinggian x

untuk memangkas hanya di atas ketinggian x:

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

ketinggian x di atas dan di bawah garis asas

untuk memangkas ketinggian x di atas dan di bawah garis asas:

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

perjalanan hanya di bawah garis dasar huruf

untuk memangkas hanya di bawah garis asas huruf, yang berikut tidak sah (perkara berjalan lancar, bukan?):

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

Ini kerana nilai pertama sentiasa nilai kelebihan atas yang diperlukan, manakala nilai kedua adalah nilai kelebihan bawah pilihan. Ini bermakna bahawa alphabetic bukan nilai kelebihan atas yang sah, walaupun termasuk trim-end bermakna kita tidak akan menyediakannya. Selain daripada aduan yang jelas, sintaks yang betul akan membolehkan anda mengisytiharkan nilai kelebihan atas, walaupun anda sebenarnya membatalkannya dengan trim-end:

text-box-edge: cap; /* Computed as text-box-edge: cap text; */

di mana hieroglif?

Sukar untuk mengetahui bagaimana mereka akan dipangkas sebelum penyemak imbas web, tetapi anda boleh membaca segala -galanya dalam spesifikasi. Secara teori, anda perlu menggunakan nilai ideographic-ink untuk pemangkasan, dan menggunakan nilai ideographic tanpa pemangkasan, kedua -duanya tidak disokong:

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

text-box, atribut singkatan

Jika anda tidak menyukai kekerapan kotak teks yang memangkas, terdapat singkatan atribut text-box yang menjadikannya kurang penting. Semua peraturan yang sama dikenakan.

text-box-trim: trim-both;
text-box-edge: cap alphabetic;

Pemikiran akhir

pada pandangan pertama, text-box-trim dan text-box-edge mungkin tidak kelihatan menarik, tetapi mereka membuat unsur -unsur jarak lebih mudah.

Tetapi cadangan semasa cara terbaik untuk menangani kotak teks? Secara peribadi, saya tidak fikir begitu. Saya fikir text-box-trim-start dan text-box-trim-end akan lebih masuk akal, text-box-trim digunakan sebagai atribut singkatan, dan text-box-edge tidak digunakan sama sekali, tetapi saya bersedia menerima pendekatan yang mudah dan/atau konsisten. Apa pendapat anda?

Terdapat beberapa kebimbangan lain. Sebagai contoh, sekiranya ada pilihan untuk memasukkan garis bawah, overscores, gantung tanda baca, atau tanda diacritik? Saya akan berkata ya, terutamanya jika anda menggunakan text-underline-position: under atau terutamanya tebal text-decoration-thickness kerana mereka akan membuat jarak antara unsur -unsur kelihatan lebih kecil.

Atas ialah kandungan terperinci Dua sifat CSS untuk memangkas ruang kotak teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!