Tetapkan had panjang teks kepada N baris menggunakan CSS-tutorial css-php.cn

Tetapkan had panjang teks kepada N baris menggunakan CSS

王林

Lepaskan： 2023-08-27 13:29:08

ke hadapan

1344 orang telah melayarinya

使用 CSS 将文本长度限制设置为 N 行

Kadangkala, pembangun perlu memotong teks mengikut saiz elemen HTML. Sebagai contoh, lebar elemen div ialah 100px dan ia hanya boleh memuatkan beberapa aksara. Oleh itu, kita perlu menggunakan CSS untuk memotong teks.

Walau bagaimanapun, kami boleh menggunakan JavaScript untuk memotong teks, tetapi ini boleh menyebabkan masalah. Sebagai contoh, kita boleh memaparkan 18 aksara dalam 100px, tetapi kadangkala kurang aksara mungkin dipaparkan disebabkan penggunaan huruf besar aksara. Dalam kes ini, jika kita memaparkan 18 aksara, ia mungkin melimpah.

Jadi, menggunakan CSS untuk memotong teks adalah idea yang lebih baik.

Tatabahasa

Pengguna boleh menetapkan had teks kepada N baris menggunakan CSS menggunakan sintaks berikut.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Salin selepas log masuk

Dalam sintaks di atas, kami menetapkan limpahan kepada tersembunyi dan 'text-overflow: elipsis' untuk memotong teks. Nilai sifat "-webkit-line-clamp" menunjukkan bilangan baris untuk dipaparkan.

Contoh 1

Dalam contoh di bawah, kami hanya memaparkan satu baris teks. Kami akan memotong teks yang lain. Kami menetapkan 300px sebagai lebar elemen div, tersembunyi sebagai limpahan dan elipsis sebagai atribut limpahan teks. Selain itu, kami menggunakan atribut "ruang putih" dan nilai "tiada bungkus" untuk memaparkan teks hanya dalam satu baris.

<html>
<head>
   <style>
      div {
         height: auto;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         background-color: red;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to 1 line using CSS</h2>
   <div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh 2

ialah:

Contoh 2

Dalam contoh di bawah, kami menunjukkan N baris teks terpotong. Kami menambah teks pada elemen div seperti dalam contoh pertama. Selepas itu, kami menggunakan sifat CSS "webkit-line-clamp" untuk menetapkan bilangan baris dan bukannya menggunakan sifat CSS "white-space: no-wrap".

Dalam output, pengguna dapat melihat bahawa ia hanya menunjukkan tiga baris teks yang dipotong. Pengguna boleh menukar bilangan baris dan memerhatikan output.

<html>
<head>
   <style>
      div {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         line-height: 20px;
         max-height: 100px;
         padding: 4px 10px;
         max-width: 400px;
         background-color: aqua;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h3>Limiting the text length to N line using CSS</h3>
   <div>Git is a popular version control system used to track changes in code or other files. It allows multiple
      developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
      distributed architecture, which means that each developer has their own local copy of the repository, and
      changes can be easily merged together.</div>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh 3

ialah:

Contoh 3

Dalam contoh di bawah, kami akan menunjukkan penggunaan masa nyata pemangkasan teks kepada N baris. Di sini kami telah mencipta komponen kad menggunakan HTML dan CSS. Kami menambahkan imej di sebelah kiri kad dan teks di sebelah kanan. Selain itu, lebar kad ditetapkan.

Kita perlu memaparkan teks di sebelah kanan kad tanpa membiarkan teks melimpah. Kami memotong teks kepada 4 baris, yang boleh dilihat dalam output.

<html>
<head>
   <style>
      .card {
         background-color: grey;
         width: 400px;
         height: 80px;
         display: flex;
         border-radius: 12px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         text-align: left;
         justify-content: center;
      }
      .img {
         width: 130px;
         height: 70px;
         margin-right: 30px;
         padding: 5px;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .content {
         width: 450px;
         height: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to N line using CSS</h3>
   <div class = "card">
      <div class = "img">
         <img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" alt = "img">
      </div>
      <div class = "content">
         This is an information about the image. Whatever text will fit to the div, it will be shown. If the text is
         more than the div, then it will be hidden and the text will be shown as ellipsis.
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Pengguna belajar memotong teks menjadi berbilang baris. Kita boleh memotong teks menggunakan sifat CSS 'overflow:hidden' dan 'text-overflow:elipsis'. Selain itu, kita perlu menggunakan "white-space: no-wrap" untuk memotong satu baris teks dan sifat CSS "webkit-line-clamp:lines" untuk memotong teks menjadi berbilang baris.

Atas ialah kandungan terperinci Tetapkan had panjang teks kepada N baris menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!