Bagaimana untuk memaparkan css melebihi elips

Dalam reka bentuk web, kami sering menghadapi situasi di mana kandungan teks terlalu panjang Pada masa ini, kandungan teks yang melebihi panjang tertentu perlu ditinggalkan dan dipaparkan untuk mengelakkan reka letak antara muka diregangkan dan menjejaskan pengalaman pengguna. CSS menyediakan paparan mudah di luar atribut elipsis yang boleh membantu pembangun melaksanakan fungsi ini.

Dalam CSS, paparan di luar elipsis dicapai dengan limpahan teks. Apabila sekeping teks melebihi saiz bekasnya, anda boleh menetapkan sifat limpahan teks untuk menunjukkan teks berlebihan dengan elipsis (...). Biasanya anda perlu menentukan tiga atribut berikut:

1. atribut ruang putih: mengawal cara ruang putih dalam elemen dikendalikan Anda boleh menetapkan nilai kepada nowrap, yang bermaksud teks dipaksa untuk dipaparkan tanpa membalut, kerana elips biasanya muncul di Akhir baris.
2. atribut limpahan: Mengawal cara kandungan elemen dipaparkan apabila ia melimpahi kotak elemen Anda boleh menetapkan nilai kepada tersembunyi atau tatal, kerana hanya apabila teks dalam bekas melebihi saiz bekas, paparan. perlu ditinggalkan.
3. atribut text-overflow: Menunjukkan cara teks dipaparkan selepas ia melebihi bekas Anda boleh menetapkan nilai kepada elipsis, yang bermaksud menggunakan elipsis (...).

Contohnya:

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

Kod CSS ini mentakrifkan kelas bekas .bekas Apabila kandungan teks dalam bekas melebihi saiz bekas, elipsis (.. .)menyatakan. Pada masa yang sama, kerana atribut ruang putih ditetapkan kepada nowrap, teks tidak akan dibalut.

Perlu diambil perhatian bahawa paparan di luar elipsis hanya berkesan pada beberapa elemen tertentu, seperti elemen peringkat blok dan elemen sebaris seperti div, p, span, dsb. Untuk elemen seperti kotak input dan butang, anda perlu menetapkan atribut khusus untuk mencapai kesan yang serupa.

Dalam pembangunan sebenar, untuk serasi dengan penyemak imbas yang berbeza, adalah disyorkan untuk menggunakan dua kaedah berikut pada masa yang sama untuk mencapai melebihi paparan elipsis:

1. Gunakan teks -overflow:ellipsis; -webkit-box -orient: vertical; -webkit-line-clamp:n dilaksanakan dalam kombinasi dengan atribut lanjutan CSS -webkit-line-clamp bagi teras WebKit, dengan n ialah bilangan baris yang ditentukan; . Contohnya:

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Kod CSS ini mengehadkan kandungan teks kepada dua baris dan kandungan yang berlebihan akan diwakili oleh elipsis (...). Perlu diingatkan bahawa atribut -webkit-line-clamp hanya sah untuk penyemak imbas dengan teras WebKit (seperti Chrome, Safari, dll.), dan untuk penyemak imbas lain, atribut lain perlu digunakan.

2. Gunakan elemen pseudo :sebelum atau :selepas digabungkan dengan atribut kandungan untuk mencapai ini. Contohnya:

.container {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container:after {
  content: "...";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

Kod CSS ini menggunakan elemen pseudo: selepas menambah elemen dengan warna latar belakang putih, dan kemudian menggunakan atribut kandungan dengan kandungan "..." untuk mencapai kesan elipsis. Perlu diingatkan bahawa untuk mengekalkan kedudukan relatif unsur pseudo dan bekas, atribut kedudukan kelas kontena perlu ditetapkan kepada relatif.

Ringkasnya, CSS di luar paparan elipsis ialah teknik reka bentuk klasik yang boleh meningkatkan estetika dan pengalaman pengguna antara muka. Dalam pembangunan sebenar, adalah perlu untuk memilih kaedah yang sesuai mengikut situasi tertentu dan menjalankan ujian keserasian untuk memastikan kesan yang dicapai adalah selaras dengan jangkaan.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan css melebihi elips. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!