单行文本和多行文本溢出时显示省略号的css设置
程序员文章站
2022-04-24 14:09:49
...
单行文本
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height:200px;
width:200px;
margin: 50px auto;
border:1px solid #000;
}
.text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;/*不换行*/
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">你好，今天星期二，天气非常热，出门请注意防晒！</p>
</div>
</body>
</html>
显示效果：
这种方法使用css3的三个属性，兼容性可能会有一些问题。
方法二（一般用于移动端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height:200px;
width:200px;
margin: 50px auto;
border:1px solid #000;
}
.text{
/* 方法二 */
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;/*弹性盒子设置*/
-webkit-line-clamp: 1;/*显示为1行*/
-webkit-box-orient: vertical;/*子元素被垂直排列*/
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">你好，今天星期二，天气非常热，出门请注意防晒！</p>
</div>
</body>
</html>
这种方法一般用在移动端，不会用在pc端，因为大部分移动设备的内核都是webkit。
显示效果同方法一。
多行文本
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height:200px;
width:200px;
margin: 50px auto;
border:1px solid #000;
}
.text{
/* 方法二 */
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;/*弹性盒子设置*/
-webkit-line-clamp: 2;/*显示为2行*/
-webkit-box-orient: vertical;/*子元素被垂直排列*/
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">你好，今天星期二，天气非常热，出门请注意防晒，小心中暑！</p>
</div>
</body>
</html>
显示效果：
这种方法和单行文本的第二种方法是一样的，只需要将webkit-line-clamp属性值改为所需行数即可。
方法二：
这种方法使用after伪类在文字后面添加省略号：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height:200px;
width:200px;
margin: 50px auto;
border:1px solid #000;
}
.text:after{
content:"..."
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">你好，今天星期二，天气非常热，出门请注意防晒，小心中暑！</p>
</div>
</body>
</html>
显示效果：
方法三：
在文字后面手动添加<span>...</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
height:200px;
width:200px;
margin: 50px auto;
border:1px solid #000;
}
.text{
position:relative;
height:40px;
line-height:20px ;
padding-right: 12px;
overflow: hidden;
}
.ellipsis{
position:absolute;
right:10px;
bottom:0;
}
</style>
</head>
<body>
<div class="wrap">
<p class="text">你好，今天星期二，天气非常热，出门请注意防晒，小心中暑！<span class="ellipsis">...</span></p>
</div>
</body>
</html>
显示效果：
推荐阅读
-
css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
-
CSS实现单行、多行文本溢出显示省略号
-
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）
-
兼容ie的多行文本溢出隐藏，并显示省略号
-
CSS文本溢出时以省略号的形式显示
-
css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
-
HTML、css——设置文本框中的默认字体颜色和点击输入的文本字体颜色不一致；并且点击文本框，文本框边框消失；输入内容时，默认字体消失。
-
CSS实现单行、多行文本超出部分显示省略号
-
css文本单行超出和多行超出省略号分别如何实现？
-
单行文本和多行文本溢出时显示省略号的css设置