Bagaimana untuk menyelesaikan limpahan teks css

Dalam reka bentuk web, adalah perkara biasa untuk menemui teks yang melebihi sempadan elemen. Limpahan teks boleh memecahkan reka letak reka bentuk dan menjejaskan pengalaman pengguna, tetapi pengetahuan CSS yang sangat baik boleh membantu kami menyelesaikan masalah ini.

Sebenarnya terdapat beberapa cara untuk mengawal cara teks diproses, dan saya akan memperkenalkannya di bawah dengan contoh praktikal.

1. Elipsis

Elipsis ialah kaedah pemprosesan pemangkasan teks yang paling biasa digunakan, yang boleh digunakan dalam kes pemangkasan teks satu baris atau berbilang baris.

Elipsis baris tunggal

Dalam situasi di mana satu baris teks penuh sesak, menetapkan lebar bekas teks dan penggayaan elipsis di luar teks adalah penyelesaian.

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

Dalam kod, atribut ruang putih ditetapkan kepada nowrap, yang memastikan teks dipaparkan pada satu baris tanpa mencipta sebarang ruang tambahan. limpahan teks: elipsis membenarkan aksara dalam bekas yang melebihi lebar bekas disembunyikan dan digantikan dengan elips apabila bekas itu kecil.

Pengguguran berbilang baris

Apabila teks berbilang baris melebihi sempadan, anda boleh menetapkan bilangan baris untuk memaparkan teks dalam julat bilangan baris. Sifat CSS berikut boleh digunakan:

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

Dalam kod ini, gunakan display: -webkit-box dan -webkit-box-orient: vertical untuk menetapkan kandungan teks ke dalam kotak fleksibel berorientasikan menegak, dan hadkan teks dengan menetapkan -webkit-line-clamp atribut untuk 3 baris. Akhir sekali, gunakan overflow: hidden untuk mengawal sebarang teks berlebihan.

2. Menatal teks

Satu lagi penyelesaian kepada teks yang melimpah adalah dengan memintanya menatal di dalam bekas teks. Kaedah ini secara automatik boleh menatal teks dalam bekas teks pada kelajuan yang telah ditetapkan, supaya lebihan teks boleh dikendalikan dengan sewajarnya. Berikut ialah sifat CSS yang sepadan:

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

Dalam tetapan ini, white-space: nowrap dan overflow: hidden menghadkan teks kepada 1 baris dan akan mengehadkan mana-mana teks melebihi itu. animasi mentakrifkan animasi marquee untuk menatal teks ke kiri dan atribut infinite menjadikan teks menatal tanpa henti.

3. Mengendalikan ruang dan sempang

Cara lain untuk membetulkan teks yang melimpah ialah dengan mengendalikan ruang dan sempang. Ini memastikan bahawa teks tidak dipotong dan dibentangkan sepenuhnya kepada pengguna. Berikut ialah sifat CSS yang sepadan:

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

Dalam kod word-wrap: break-word mengendalikan sebarang perkataan atau aksara tunggal yang melangkaui teks, memastikan keseluruhan perkataan atau aksara muncul pada baris seterusnya dan ia tidak rosak. white-space: pre-wrap akan mengendalikan ruang dan tanda sempang, memastikan peletakannya tidak memecahkan kandungan teks. Selain itu, atribut word-break: break-all dan overflow-wrap: break-word memastikan bahawa memanjangkan teks tidak mengganggu reka letak kawasan teks.

Ringkasan

Melalui teknik CSS di atas, anda boleh mengawal dan menyelesaikan masalah limpahan teks, memberikan pengalaman pengguna yang lebih lancar dan lebih baik untuk tapak web dan aplikasi. Dalam projek anda sendiri, bereksperimen dengan sifat CSS ini pasti akan memberikan pengguna anda pengalaman yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan limpahan teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!