Menyelam Lebih Dalam Beberapa Petua CSS3 Melangkaui Ellipses

Sifat limpahan teks dalam CSS3 ialah ciri yang sangat berguna yang membolehkan kita mengawal cara kandungan teks sesuatu elemen dipaparkan apabila ia melebihi saiz bekasnya. Secara lalai, teks di luar bekas digantikan dengan elips (...). Dalam artikel ini, kita akan menyelami beberapa helah dan penggunaan CSS3 di luar elipsis.

Penggunaan asas

Mula-mula, mari kita lihat penggunaan asas atribut limpahan teks. Ia mempunyai tiga nilai pilihan:

• klip: Klip teks di luar bekas tanpa memaparkan elips.
• elipsis: Memaparkan elipsis di hujung bekas. (Lalai)
• rentetan: Paparkan rentetan yang ditentukan di hujung bekas.

Berikut ialah contoh mudah yang menunjukkan cara memaparkan elipsis di hujung bekas:

div {
  width: 200px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Ini akan memaparkan satu baris teks dalam div lebar 200 piksel. Apabila teks melebihi saiz bekas, ia dipotong dan digantikan dengan elips.

Gunakan elemen pseudo sebelum atau selepas untuk menambah elipsis

Gunakan limpahan teks atribut gaya untuk menyedari bahawa teks melebihi elipsis Secara amnya, elipsis ditambahkan pada penghujung bekas itu. Penyelesaian ini adalah yang paling mudah, tetapi juga pendekatan yang paling biasa. Jika kita ingin membuat lebih banyak sorotan, maka kita perlu memikirkan pendekatan yang lebih inovatif.

Menggunakan unsur pseudo CSS :sebelum atau :selepas boleh menambah elipsis dengan mudah Kaedah ini biasanya boleh mencapai kesan khas (contohnya: teks elipsis dijajar kiri). Dengan menambahkan gaya, kita boleh mengawal cara elemen pseudo dipaparkan dan mengatasi paparan teks asal.

Kod berikut menunjukkan penambahan elipsis pada sebelah kanan bekas:

div {
  position: relative;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

div:before {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff;
  padding: 0 2px;
}

Ini akan menambah elipsis pada sebelah kanan bekas. Kami meletakkan elemen pseudo di penjuru kanan sebelah atas bekas menggunakan kedudukan mutlak dan menambah latar belakang putih dan beberapa pelapik padanya untuk memastikan elips kelihatan sepenuhnya.

Gunakan fungsi CSS3 calc() untuk mengawal ruang yang tersedia untuk elipsis

Fungsi calc() dalam CSS3 membolehkan kami menggunakan ungkapan matematik dalam CSS, yang sangat berguna untuk mengira saiz atau saiz secara dinamik. jarak. Dengan lebihan elips, kita boleh menggunakan fungsi calc() untuk mengawal ruang yang tersedia bagi memastikan teks dan elipsis dapat dipaparkan sepenuhnya.

Kod berikut menunjukkan cara memaparkan teks dan elips dalam bekas selebar 300 piksel:

div {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 20px); /* 容器宽度-省略号的宽度 */
  vertical-align: top;
}

div span:after {
  content: '...';
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  text-align: center;
  background-color: #fff; /* 背景色和容器一致 */
}

Dalam kod di atas, kami menggunakan dua gaya utama: fungsi calc( ) dan elemen rentang. Elemen Span ditetapkan kepada blok sebaris, yang membolehkan teks menduduki baris dengan sendirinya tanpa menjejaskan pemaparan elemen lain. Gunakan atribut max-width untuk menetapkan lebar maksimum elemen span kepada lebar bekas tolak lebar elipsis Ini memastikan bahawa teks tidak melebihi ruang yang tersedia bagi bekas.

Menggunakan CSS3 Flexbox

Reka letak Flexbox dalam CSS3 sangat berguna, ia membolehkan kami membuat reka letak yang fleksibel dan responsif menggunakan CSS. Apabila kita perlu memaparkan berbilang baris teks dalam bekas dan ingin menambah elips pada baris terakhir, menggunakan reka letak Flexbox ialah pilihan yang baik.

Kod berikut menunjukkan cara menggunakan reka letak Flexbox untuk memaparkan berbilang baris teks dalam bekas selebar 300 piksel, menambah elipsis pada baris terakhir:

div {
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 300px;
  overflow: hidden;
}

div p {
  flex: 1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div p:last-child {
  overflow: visible; /* 显示容器溢出的文本 */
  text-overflow: '';
  white-space: normal;
}

Dalam kod di atas, Kami menggunakan tiga sifat gaya utama: paparan: lentur, arah lentur: lajur dan lentur: 1. Bekas Flex ditetapkan kepada lajur flex-direction: supaya elemen anak disusun secara menegak. Setiap elemen perenggan ditetapkan kepada lentur: 1 untuk memastikan ia mengambil ketinggian penuh bekas.

Elemen perenggan terakhir ditetapkan kepada limpahan: kelihatan supaya ia melimpahi bekas dan memaparkan semua teks. Kami juga menetapkan sifat limpahan teks kepada rentetan kosong supaya ia tidak menjepit teks kepada elips. Dengan cara ini, teks dalam elemen perenggan terakhir secara semula jadi akan melimpah pada baris terakhir bekas dan reka letak Flexbox akan menambah elipsis secara automatik pada baris terakhir.

Ringkasan

Dalam artikel ini, kami meneroka beberapa teknik dan penggunaan CSS3 di luar elips. Selain sifat limpahan teks asas, kami juga menunjukkan cara menggunakan elemen pseudo dan fungsi calc() CSS3 untuk mencapai kesan yang lebih kreatif. Kami juga membincangkan cara menggunakan reka letak CSS3 Flexbox untuk memaparkan berbilang baris teks dan menambah elips. Tidak kira teknologi yang anda gunakan, pastikan anda menggunakan amalan terbaik apabila memaparkan teks Ini akan memastikan teks dipaparkan dengan baik dalam pelbagai konteks.

Atas ialah kandungan terperinci Menyelam Lebih Dalam Beberapa Petua CSS3 Melangkaui Ellipses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!