css文本超出部分用省略号显示

最新推荐文章于 2024-07-19 15:50:46 发布

IT大哥哥

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量225

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/bigorange1/article/details/129666120

版权

1. 单行文字省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子鸡瘟</title>
    <style>
span{
    display: block;
    width:150px;
    height:80px;
    border: 1px solid red;
    overflow: hidden;  /* 超出一行文字自动隐藏 */
        text-overflow: ellipsis;  /*文字隐藏后添加省略号*/
        white-space: nowrap;   /*强制不换行*/
}
    </style>
</head>
<body>
    <span>
        网络用语。
最早出自于歌手蔡徐坤的一段打篮球视频，由于他在里面的伴随着歌曲《只因你太美》跳的舞蹈比较魔性，所以被网友们争相模仿，而歌曲《只因你太美》中的只因听起来像鸡，因此被网友传播调侃为电子鸡瘟。
蔡徐坤是一位中国内地的流行歌手、演员、舞者和音乐制作人。他于1998年8月2日出生于湖南省长沙市，曾在加拿大求学。2014年，他以练习生身份参加了选秀节目《偶像练习生》，踢馆成功进入了九人男团。
    </span>
</body>
</html>

在这里插入图片描述

2.多行文字省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子鸡瘟</title>
    <style>
span{
    display: block;
    width:150px;
    
    border: 1px solid red;
    text-overflow: -o-ellipsis-lastline;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;/*设置为2行*/
         line-clamp: 2;			/*设置为2行*/
         -webkit-box-orient: vertical;
}
    </style>
</head>
<body>
    <span>
        网络用语。
最早出自于歌手蔡徐坤的一段打篮球视频，由于他在里面的伴随着歌曲《只因你太美》跳的舞蹈比较魔性，所以被网友们争相模仿，而歌曲《只因你太美》中的只因听起来像鸡，因此被网友传播调侃为电子鸡瘟。
蔡徐坤是一位中国内地的流行歌手、演员、舞者和音乐制作人。他于1998年8月2日出生于湖南省长沙市，曾在加拿大求学。2014年，他以练习生身份参加了选秀节目《偶像练习生》，踢馆成功进入了九人男团。
    </span>
</body>
</html>