Farih.co.id
Home Programming Cara Membatasi Baris Teks Hanya Dengan CSS

Cara Membatasi Baris Teks Hanya Dengan CSS

man working on macbook pro 1

Membatasi jumlah teks dalam suatu elemen adalah persyaratan desain web yang umum. Anda akan sering melihat artikel dengan kutipan tiga atau empat baris dengan tombol yang memungkinkan Anda memperluas teks lengkap.


Anda dapat membuat desain ini menggunakan kombinasi CSS dan JavaScript. Tapi Anda juga bisa melakukannya dengan menggunakan CSS saja. Temukan dua cara untuk membatasi teks dalam kotak dan cara membuat tombol perluas dinamis hanya dengan menggunakan CSS.


Teknik Webkit

Buat folder kosong dan edit dua file di dalamnya: index.html Dan style.css. Di dalam index.html file, buat kerangka HTML:

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
</body>

</html>

Tautan di bagian, ke style.css file, memastikan bahwa setiap CSS yang Anda tambahkan ke file tersebut akan diterapkan ke halaman ini. Selanjutnya, rekatkan markup HTML berikut di dalam file tag masuk index.html:

 <section class="card-group">
  <article class="card">
    <h2>Article 1</h2>

    <p class="cuttoff-text">
      300-word text goes here
    </p>

    <input type="checkbox" class="expand-btn">
  </article>

  <article class="card">
    <h2>Article 2</h2>

    <p class="cuttoff-text">
      200-word text goes here
    </p>

    <input type="checkbox" class="expand-btn">
  </article>

  <article class="card">
    <h2>Article 1</h2>

    <p class="cuttoff-text">
      100-word text goes here
    </p>

    <input type="checkbox" class="expand-btn">
  </article>
</section>

Struktur HTML ini sederhana, namun masih menggunakan markup semantik untuk aksesibilitas. Elemen bagian berisi tiga elemen artikel. Setiap artikel terdiri dari heading, paragraf, dan elemen input. Anda akan menggunakan CSS untuk memberi gaya pada setiap bagian artikel menjadi sebuah kartu.

Sementara itu, halaman Anda akan terlihat seperti ini:

Gambar yang menampilkan bagian artikel

Dari gambar di atas, Anda dapat melihat panjang teks yang bervariasi di setiap paragraf. 300 kata pada kalimat pertama, 200 kata pada kalimat kedua, dan 100 kata pada kalimat ketiga.

Langkah selanjutnya adalah mulai menata halaman dengan menambahkan CSS ke style.css mengajukan. Mulailah dengan mengatur ulang batas pada dokumen dan memberi warna putih pada badan:

 *, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: #f3f3f3;
  overflow: hidden;
}

Selanjutnya, ubah elemen dengan kelas grup kartu menjadi wadah kisi dengan tiga kolom. Setiap bagian artikel menempati kolom:

 .card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  align-items: flex-start;
}

Beri gaya pada setiap bagian artikel sebagai kartu dengan warna latar belakang putih dan bingkai hitam agak bulat:

 .card {
  background: white;
  padding: 1rem;
  border: 1px solid black;
  border-radius: .25em;
}

Terakhir, tambahkan beberapa margin:

 h2, p {
  margin: 0;
}

h2 {
  margin-bottom: 1rem;
}

Simpan file dan periksa browser Anda. Halaman tersebut akan terlihat seperti halaman yang ditunjukkan pada gambar di bawah ini:

Gambar kotak kotak dengan tiga kartu

Langkah selanjutnya adalah memotong jumlah baris untuk setiap teks menjadi 3. Berikut CSS untuk itu:

 .cuttoff-text {
  --max-lines: 3;
  overflow: hidden;
   
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--max-lines);
}

Mulailah dengan menyetel variabel CSS, max-lines, ke 3 dan menyembunyikan konten yang meluap. Kemudian atur tampilan ke -kotak-webkit dan jepit garis ke 3.

Gambar berikut menunjukkan hasilnya. Setiap kartu menampilkan elips pada baris ketiga teks:

Cuplikan layar wadah kisi dengan tiga kartu dibatasi hingga tiga teks per baris

Teknik ini bisa sangat sulit untuk dilakukan. Jika Anda menghilangkan properti apa pun maka semuanya akan rusak. Kelemahan lainnya adalah Anda tidak dapat menggunakan properti tampilan selain –kotak-webkit. Misalnya, Anda mungkin ingin menggunakan Grid atau Flexbox. Untuk alasan ini, teknik berikut ini lebih baik.

Pendekatan yang Lebih Fleksibel untuk Membatasi Jumlah Baris dalam Teks

Teknik ini memungkinkan Anda melakukan hal yang sama seperti pendekatan webkit, dengan hasil yang sama. Tetapi perbedaan besarnya adalah Anda memiliki banyak fleksibilitas karena Anda mengatur sendiri ketinggiannya. Selain itu, Anda dapat menggunakan properti tampilan apa pun atau opsi gaya apa pun yang Anda sukai.

Untuk memulai, ganti blok CSS untuk .cutoff-text dengan ini:

 .cuttoff-text {
  --max-lines: 5;
  --line-height: 1.4;
  height: calc(var(--max-lines) * 1em * var(--line-height));
  line-height: var(--line-height);
  position: relative;
}

Menetapkan tinggi garis penting karena Anda perlu memperhitungkannya saat menentukan tinggi badan Anda. Untuk mendapatkan tinggi, kalikan tinggi garis dengan ukuran font dan jumlah garis.

Kami menambah posisi: relatif property karena kita membutuhkannya untuk menambahkan efek fade. Tambahkan CSS berikut untuk melengkapi efeknya:

 .cuttoff-text::before {
  content: "";
  position: absolute;
  height: calc(2em * var(--line-height));
  width: 100%;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, white);
}

CSS di atas mengaburkan baris teks terakhir di setiap kartu. Anda dapat mencapai efek fading menggunakan latar belakang properti dan gradien. Anda harus mengatur pointer-events ke tidak ada untuk memastikan bahwa elemen tersebut tidak dapat dipilih.

Inilah hasilnya:

Cuplikan layar wadah kisi dengan kartu menggunakan efek buram

Teknik ini mencapai hasil yang sama dengan teknik sebelumnya (ditambah keburaman di bagian akhir). Tetapi Anda mendapatkan lebih banyak fleksibilitas untuk menggunakan tata letak dan desain jenis lain.

Menambahkan Tombol Perluas dan Ciutkan Dinamis

Menambahkan tombol perluas/ciutkan membuat kartu lebih realistis dan interaktif. Dengan pola ini, Anda memperluas konten dengan mengeklik Memperluas tombol, setelah itu teks berubah menjadi Runtuh. Jadi teks tombol beralih antara “Perluas” dan “Tutup” saat Anda mengkliknya. Selanjutnya, sisa konten ditampilkan dan disembunyikan di masing-masing negara bagian.

Anda telah mendefinisikan an memasukkan elemen dalam HTML Anda. Elemen ini akan berfungsi sebagai tombol Anda. Untuk menata masukan ini ke dalam tombol, sertakan CSS berikut di lembar gaya Anda:

 .expand-btn {
  appearance: none;
  border: 1px solid black;
  padding: .5em;
  border-radius: .25em;
  cursor: pointer;
  margin-top: 1rem;
}

Saat Anda mengarahkan kursor ke tombol, Anda ingin mengubah warna latar belakang:

 .expand-btn:hover {
  background-color: #ccc;
}

Sekarang CSS untuk mengganti teks saat input dicentang:

 .expand-btn::before {
  content: "Expand"
}

.expand-btn:checked::before {
  content: "Collapse"
}

Sekarang ketika Anda mengklik tombol/masukan, teks akan keluar Memperluas ke Runtuh. Namun kontennya sendiri belum akan berkembang. Untuk melakukannya saat Anda mengklik tombol, tambahkan CSS berikut:

 .cuttoff-text:has(+ .expand-btn:checked) {
  height: auto;
}

Contoh ini menggunakan pemilih has() CSS untuk menargetkan elemen. Dengan kode ini, Anda mengatakan bahwa jika area teks terpotong memiliki tombol perluas yang dicentang, tinggi kartu seharusnya mobil (yang mengembangkannya).

Inilah hasilnya:

Cuplikan layar menampilkan wadah kisi dengan satu kartu yang diperluas dan dua kartu yang diciutkan

Tip dan Trik CSS Lainnya untuk Dipelajari

Artikel ini mendemonstrasikan dua metode berbeda untuk membatasi jumlah baris dalam kotak menggunakan CSS. Kami bahkan menambahkan tombol untuk meluaskan/menciutkan konten tanpa menulis satu baris pun JavaScript.

Tapi ada banyak tip dan trik lain di CSS. Kiat ini menawarkan cara kreatif untuk mencapai tata letak yang Anda inginkan tanpa mengganggu kinerja, keterbacaan, atau aksesibilitas.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad