Tampilkan hanya 2 baris css

Saat Anda membuat tata letak di CSS, penting untuk memperhitungkan dan menguji konten teks pendek dan panjang. Memiliki gagasan yang jelas tentang apa yang harus dilakukan ketika panjang teks bervariasi dapat mencegah banyak masalah yang tidak diinginkan

Ada banyak situasi di mana menambahkan atau menghapus satu kata dapat mengubah tampilan desain, atau lebih buruk lagi, dapat merusaknya dan membuatnya tidak dapat diakses. Pada hari-hari awal saya belajar CSS, saya meremehkan apa yang dapat dilakukan dengan menambah atau menghapus kata. Pada artikel ini, saya akan membahas berbagai teknik yang dapat Anda gunakan langsung untuk menangani panjang teks yang berbeda di CSS

Masalah

Sebelum membahas teknik menangani konten teks, izinkan saya menjelaskan masalahnya terlebih dahulu. Misalkan kita memiliki navigasi vertikal

Panjang nama dapat bervariasi, terutama jika Anda bekerja di situs web multibahasa. Pada contoh di atas, nama dibungkus menjadi baris kedua karena menjadi lebih panjang. Berikut adalah beberapa pertanyaan

• Haruskah kita memotong teks?
• Haruskah kita membungkus menjadi beberapa baris?

Itulah yang terjadi dengan lebih banyak kata dari yang diharapkan, tetapi apa yang terjadi jika sebuah kata terlalu panjang?

Sebagai pengembang front-end, penting untuk memutuskan apa yang harus terjadi dalam kasus seperti itu. Untungnya, ada beberapa properti CSS yang didesain hanya untuk menyelesaikan masalah tersebut

Selain itu, masalahnya bukan hanya tentang konten yang panjang, tetapi juga konten pendek dapat merusak UI, atau setidaknya membuatnya terlihat aneh. Lihat contoh di bawah ini

Tombol dengan teks "ok" lebarnya sangat kecil. Saya tidak mengatakan bahwa ini adalah masalah yang fatal, tetapi dapat membuat tombol terlihat lemah atau sulit untuk diperhatikan

Apa yang harus kita lakukan dalam kasus seperti itu?

Seperti yang baru saja Anda baca, ini bukan tentang konten yang panjang. Juga, konten pendek dapat menyebabkan masalah. Dengan menggunakan beberapa teknik CSS, setidaknya kita bisa mengurangi masalah panjang atau pendeknya konten

Konten panjang

Sekarang setelah Anda memiliki gambaran tentang masalahnya, mari gali teknik CSS yang memberikan solusi untuk menangani konten yang panjang

Bungkus luapan

Properti

.element {
  hyphens: auto;
}

.card {
  overflow-wrap: break-word;
}

Tanda hubung

Properti CSS yang memungkinkan bowser memutuskan bagaimana kata-kata harus ditulis dengan tanda penghubung saat konten teks dibungkus dalam beberapa baris. Tanda hubung dapat dilakukan secara manual dengan memasukkan simbol HTML yang memandu browser jika perlu memberi tanda hubung pada kata

.element {
  hyphens: auto;
}

Padahal, penting untuk diingat bahwa

.element {
  hyphens: auto;
}

Perhatikan bagaimana browser memberi tanda penghubung pada sebuah kata sementara itu dapat dengan mudah dipindahkan ke baris berikutnya. Saat menggunakan

.element {
  hyphens: auto;
}

pemotongan teks

Pemotongan berarti menambahkan titik-titik di akhir kalimat untuk memberi indikasi bahwa ada lebih banyak konten teks

Tidak ada

.element {
  hyphens: auto;
}

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Pemotongan teks beberapa baris

Jika Anda ingin pemotongan beberapa baris, Anda harus menggunakan properti

.element {
  hyphens: auto;
}

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Agar teknik ini berhasil,

.element {
  hyphens: auto;
}

.element {
  hyphens: auto;
}

Kelemahan dari teknik ini adalah dapat dengan mudah gagal jika Anda ingin menambahkan

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Pengguliran horizontal

Terkadang, tidak selalu praktis untuk memecahkan atau memberi tanda penghubung pada sebuah kata. Misalnya, kode javascript mungkin sulit dibaca saat kata yang panjang dipecah menjadi baris baru. Dalam kasus seperti itu, mengizinkan pengguliran horizontal akan membuat pengalaman membaca menjadi lebih baik

.code {
  overflow-x: auto;
}

Lapisan

Dalam beberapa kasus, Anda mungkin lupa menambahkan

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Kami memiliki daftar kotak centang, dan salah satunya sangat mirip dengan item saudaranya. Alasan mengapa hal ini terjadi adalah karena tidak ada selokan di jaringan. Ini adalah contoh nyata dari situs web Techcrunch

Konten pendek

Saya tahu bahwa ini mungkin tidak umum bagi Anda, tetapi penting untuk dipertimbangkan saat mendesain dan membangun UI

Mengatur lebar minimum

Mari kembali ke contoh yang saya tunjukkan di awal artikel. Bagaimana kami dapat meningkatkan ini dan membuat tombol terlihat lebih baik?

Kita bisa menyelesaikan ini dengan hanya menambahkan

.element {
  hyphens: auto;
}

Sekarang setelah Anda memiliki gagasan tentang masalah dan solusinya, mari jelajahi beberapa kasus penggunaan dan contoh dari seluruh web

Gunakan kasus dan contoh

Kartu profil

Ini adalah contoh umum konten panjang. Sulit untuk memprediksi panjang nama. Bagaimana kita harus menghadapinya?

/* Solution 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Solution 2 */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Anda dapat memotong teks dengan satu baris atau melakukan pemotongan hanya jika panjang teks adalah dua baris

Item navigasi

Saat berhadapan dengan tata letak multibahasa, panjang konten akan berubah. Perhatikan contoh berikut

Item navigasi "Tentang" lebih besar di LTR (kiri ke kanan) dibandingkan dengan RTL (kanan ke kiri). Di RTL, item terlihat terlalu kecil. Memiliki area kecil yang dapat diklik tidak baik untuk UX. Apa yang bisa kita lakukan?

.nav__item {
  min-width: 50px;
}

Untuk detail lebih lanjut tentang perbedaan antara kata-kata, saya secara detail di panduan gaya RTL 101 saya

Konten artikel

Memiliki kata atau tautan yang panjang adalah hal biasa, terutama di ponsel. Pertimbangkan yang berikut ini

Kami memiliki kata panjang yang memenuhi wadahnya dan menyebabkan pengguliran horizontal. Seperti yang Anda pelajari, Anda dapat menyelesaikan ini dengan menggunakan

.element {
  hyphens: auto;
}

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-content p {
  overflow-wrap: break-word;
}

Kereta Belanja

Nama produk dapat bervariasi dari satu kata hingga beberapa baris. Dalam contoh ini, nama produk terlalu dekat dengan tombol hapus karena tidak menambahkan spasi yang cukup di antara keduanya

Solusinya bisa dilakukan dengan menambahkan padding atau margin. Terserah Anda dan konteksnya, tetapi untuk alasan kesederhanaan, saya akan menunjukkan kepada Anda solusi

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product__name {
  margin-right: 1rem;
}

Flexbox dan konten panjang

Ada perilaku yang terjadi dengan flexbox dan konten panjang yang menyebabkan elemen meluap dari induknya. Perhatikan contoh berikut

<div class="user">
  <div class="user__meta">
    <h3 class="user__name">Ahmad Shadeed</h3>
  </div>
  <button class="btn">Follow</button>
</div>

.element {
  hyphens: auto;
}

Namun, ketika kontennya panjang, ini tidak akan berhasil. Teks akan meluap induknya

Alasannya adalah item fleksibel tidak akan menyusut di bawah ukuran konten minimumnya. Untuk mengatasinya, kita perlu menyetel

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.element {
  hyphens: auto;
}

Untuk detail saya, Anda dapat membaca tentang ini di artikel di blog saya

Kesimpulan

Saya harap Anda belajar tentang berbagai teknik untuk menangani konten pendek dan panjang di CSS. Saya senang mengerjakan artikel ini karena menyegarkan beberapa detail kecil, dan akan menjadi pengingat yang baik bagi saya di beberapa proyek mendatang

Bagaimana cara menampilkan hanya dua baris teks di CSS?

Bagaimana cara membatasi jumlah baris dalam CSS?

Bagaimana cara menampilkan teks terbatas di CSS?

Bagaimana cara membuat dua baris dalam satu baris di CSS?