css文本超出部分用省略号显示_html css 超出省略号-优快云博客

本文链接：https://blog.youkuaiyun.com/bigorange1/article/details/129666120

博客主要介绍了利用CSS实现文字省略的方法，包括单行文字省略和多行文字省略，属于前端开发领域的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>