Bagaimana untuk menetapkan css untuk melebihi elips paparan-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Bagaimana untuk menetapkan css untuk melebihi elips paparan

青灯夜游

Oct 11, 2021 pm 04:59 PM

css

Cara menetapkan elipsis di luar paparan dalam css: 1. Gunakan pernyataan "overflow:hidden;" untuk menyembunyikan bahagian yang berlebihan 2. Gunakan pernyataan "text-overflow:ellipsis;" melimpahkan elemen yang mengandungi elips untuk mewakili bahagian tersembunyi.

Bagaimana untuk menetapkan css untuk melebihi elips paparan

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Terdapat dua situasi apabila tetapan css melebihi paparan elipsis

Satu baris teks melimpah untuk memaparkan elipsis...
Limpahan teks berbilang baris memaparkan elips...

Tetapi kod teras yang digunakan adalah sama: anda perlu menggunakan "overflow:hidden;" pertama untuk menyembunyikan bahagian yang berlebihan, dan kemudian gunakan " text-overflow:ellipsis;" Dipaparkan sebagai elipsis apabila teks melebihi had.

overflow：hidden;Jangan paparkan kandungan yang melebihi saiz objek, iaitu sembunyikan bahagian yang berlebihan; objek teks melimpah Ia adalah untuk memaparkan..., sudah tentu, anda juga boleh menetapkan atribut kepada klip untuk tidak memaparkan titik;
1. Teks satu baris melimpah dan memaparkan elips...text-overflow：ellipsis;

Rendering:

2 , teks berbilang baris melimpah dan memaparkan elips...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			*{margin: 0px;padding: 0px;}
			.box{width: 300px;height: 500px;margin: 50px auto;}
			.overflow{
				width:220px;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>
				css单行文本超出长度显示省略号
			</p>
			<p class="overflow">
				css单行文本超出长度显示省略号
			</p>
		</div>
	</body>
</html>

(Mempelajari perkongsian video:

tutorial video css Bagaimana untuk menetapkan css untuk melebihi elips paparan )

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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Di manakah 'Langgan Podcast' pautan ke?Apr 16, 2025 pm 12:04 PM

Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:

Kepelbagaian enjin pelayarApr 16, 2025 pm 12:02 PM

Kami kehilangan opera ketika mereka pergi Chrome pada tahun 2013. Sama dengan Edge ketika ia juga menjadi Chrome awal tahun ini. Mike Taylor memanggil perubahan ini "menurun

Pertimbangan UX untuk Perkongsian WebApr 16, 2025 am 11:59 AM

Dari laman web Trashy Clickbait hingga paling banyak penerbitan, butang saham telah lama di mana -mana di seluruh web. Namun ia boleh dikatakan bahawa ini

Berita Platform Mingguan: Apple Menggunakan Komponen Web, Rendering HTML Progresif, Sumber Kritikal SendiriApr 16, 2025 am 11:55 AM

Dalam roundup minggu ini, Apple masuk ke dalam komponen web, bagaimana Instagram adalah skrip insta-loading, dan beberapa makanan untuk difikirkan untuk sumber kritikal sendiri.

Pathspec git dan cara menggunakannyaApr 16, 2025 am 11:53 AM

Apabila saya melihat melalui dokumentasi arahan git, saya perhatikan bahawa banyak daripada mereka mempunyai pilihan untuk. Saya pada mulanya berpendapat bahawa ini hanya

Pemetik warna untuk gambar produkApr 16, 2025 am 11:49 AM

Bunyi seperti masalah yang sukar tidak? Kami sering tidak mempunyai tembakan produk dalam beribu -ribu warna, supaya kita dapat membalikkannya. Kami juga tidak

Mod gelap bertukar -tukar dengan reaksi dan temaApr 16, 2025 am 11:46 AM

Saya suka apabila laman web mempunyai pilihan mod gelap. Mod gelap menjadikan laman web lebih mudah bagi saya untuk membaca dan membantu mata saya berasa lebih santai. Banyak laman web, termasuk

Beberapa tangan dengan elemen dialog HTMLApr 16, 2025 am 11:33 AM

Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan

See all articles