简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

使用css3截断文本并加省略号

PHPz
Lepaskan： 2017-04-02 10:28:41
asal
1989 orang telah melayarinya

代码展示：

overflow : hidden;
/*text-overflow: ellipsis; 有些示例里需要定义该属性，实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
Salin selepas log masuk

概述

-webkit-line-clamp是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

全部代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3截取字符串多行</title>
<style>
.box { 
width: 400px; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; overflow: hidden;
}
</style>
</head></p> <p><body>
<div class="box">
css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，
</div>
</body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci 使用css3截断文本并加省略号. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css3
sumber：php.cn
Artikel sebelumnya：介绍css3过渡和动画有哪些区别 Artikel seterusnya：使用css实现加载中动画效果
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！