Bermula CSS Potong pengembangan pada tuding atau fokus-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Bermula CSS Potong pengembangan pada tuding atau fokus

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 25, 2023 pm 09:45 PM

入门 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 id="Primer-CSS-Truncate-Expand-on-hover-or-focus-state"> 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 id="Primer-CSS-Truncate-Expand-on-hover-or-focus-state"> 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. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AM

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AM

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Cache Cache PantasApr 18, 2025 am 11:23 AM

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AM

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AM

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Persidangan Depan di ZürichApr 18, 2025 am 11:03 AM

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AM

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Membuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AM

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil

See all articles