cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bermula CSS Potong pengembangan pada tuding atau fokus

Bermula CSS Potong pengembangan pada tuding atau fokus

WBOY
WBOYke hadapan
2023-08-25 21:45:02983semak imbas

入门 CSS 悬停或焦点时截断展开

Paparan teks ialah faktor penting dalam reka bentuk web, yang mempengaruhi pengalaman pengguna dan kebolehbacaan tapak web. Jika teks anda dipaparkan dengan betul dalam cara yang teratur, pengguna akan mudah memahaminya dan dengan itu tertarik dengan tapak web anda. Walau bagaimanapun, kadangkala, teks boleh menjadi terlalu panjang untuk ruang yang ditetapkan pada halaman web. Untuk memaparkan teks ini dengan betul, kami menggunakan kaedah truncate. Primer CSS menyediakan kaedah ini di mana anda bukan sahaja boleh memotong teks tetapi juga memanjangkannya dengan kesan tuding atau fokus. Dalam artikel ini kita akan membincangkan cara ini berfungsi dan kelas yang membolehkan kita melakukan ini.

Bermula dengan CSS

Primer CSS ialah rangka kerja CSS sumber terbuka yang berkuasa yang membolehkan pembangun mencipta bahagian hadapan yang konsisten dan profesional untuk aplikasi web dan tapak web. Ia direka oleh Sistem Reka Bentuk GitHub. Ia menyediakan satu set serba boleh komponen terbina dalam seperti tipografi, butang, makluman, pemotongan, menu, navigasi, dll. yang mudah digunakan dan menjimatkan banyak masa. Di samping itu, ia menyediakan dokumentasi terperinci untuk pemula untuk bermula pada bila-bila masa. Ia mempunyai kelas yang dipratentukan untuk memotong teks yang melimpah dalam halaman web.

Sebelum menggunakan mana-mana kelas dalam CSS Primer, kita perlu memasangnya dari npm -

npm install --save @primer/css

Atau gunakan pautan CDN dalam kod HTML -

<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />

Potong dan kembangkan apabila melayang atau dalam keadaan fokus

Untuk mengembangkan teks terpenggal pada keadaan tuding atau fokus, CSS Primer mempunyai kelas terbina dalam. Kelas-kelas ini adalah seperti berikut -

  • Truncate-text - Digunakan untuk memotong mana-mana teks

  • Truncate-text--expandable - Digunakan untuk mengembangkan teks terpotong pada tuding atau fokus.

Contoh

Dalam contoh ini, kami menggunakan kelas kotak yang dipratentukan untuk menukar elemen div kepada kotak boleh ubah saiz. Di sini, p-1 ialah singkatan kelas untuk menambahkan 4px (0.25 rem) padding pada semua sisi kotak.

Seterusnya, kami mempunyai atribut gaya untuk menambah gaya yang diingini pada kotak. Kami menetapkan nilai atribut resize kepada horizontal supaya pengguna boleh mengubah saiz kotak secara mendatar hanya dengan menyeretnya dari sudut kanan. Untuk menambah bar skrol mendatar pada elemen, kami menggunakan atribut “overflow:scroll”. Menggunakan bar skrol mendatar akan membolehkan pengguna melihat kandungan tersembunyi apabila menatal teks secara mendatar.

Seterusnya, kami mencipta elemen yang mengandungi tag anchor yang akan dipotong untuk dimuatkan di dalam kotak. Truncate-text ialah kelas yang ditakrifkan untuk memotong teks di dalam teg sauh, manakala kelas Truncate-text--expandable terbina dalam untuk membolehkan pengguna mengembangkan bila-bila masa ia dituding di atas atau memfokuskan Teks dipotong. 

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 10px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailwind NextJs Typescript Java ExpressJs Vue.Js Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
      </div>
   </div>
</body>
</html>

Contoh

Dalam contoh ini, kami menambahkan teks terpenggal yang berkembang pada tuding atau fokus di dalam elemen div. 

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 15px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px">
      <div class="Truncate">
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
      </div>
   </div>
</body>
</html>

Kesimpulan

Dalam artikel ini, kami mempelajari cara memaparkan teks dengan betul dengan cara yang menarik secara visual apabila ruang terhad. Kami menggunakan kaedah pemangkasan, yang boleh dilakukan dengan mudah menggunakan CSS Primer. Selain itu, mencipta teks terpenggal boleh dikembangkan akan membolehkan pengguna mengakses maklumat apabila diperlukan tanpa menjejaskan rupa dan rasa keseluruhan tapak web. Ini menjadikan tapak web anda mesra pengguna dan profesional.

Atas ialah kandungan terperinci Bermula CSS Potong pengembangan pada tuding atau fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ciri warna tambahan disediakan oleh CSS3Artikel seterusnya：Ciri warna tambahan disediakan oleh CSS3

Artikel berkaitan

Lihat lagi