HTML文本超出显示省略号

最新推荐文章于 2025-06-10 12:41:12 发布

@一枝梅

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/YiZhiMei01/article/details/83892789

本文介绍如何使用CSS的text-overflow属性实现文本溢出时显示省略号的方法，包括设置容器宽度、强制文本单行显示、隐藏溢出内容及显示省略标记的技术细节。

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

显示省略号

说明

text-overflow: ellipsis/clip;

clip:不显示省略号（…）,而是简单的剪切；
ellipsis:当对象文本溢出时，显示省略标记；

方法一：
要实现单行文本溢出时是否显示省略标记的效果需要定义：
1.容器宽度：width：value；
2.强制文本在一行内显示：white-space:nowrap;
3.溢出内容为隐藏：overflow:hidden;
4.溢出文本显示省略号：text-overflow:ellipsis;
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 150px;
            height: 150px;
            border: 1px solid;
            margin: 0 auto;
        }
        .box p{
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div class="box">
        <p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
        <p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
        <p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
    </div>
</body>
</html>

方法二：
1.给当前设置省略号的元素加上强制不换行标签
2.给当前元素设置overflow：hidden；text-overflow：ellipsis;等属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 150px;
            height: 150px;
            border: 1px solid;
            margin: 0 auto;
        }
        .box p{
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        <nobr><p>你何秀在同一九年里,你何秀在同一九年里,你何秀在同一九年里,你何秀在同一九年里,</p></nobr>
    </div>
</body>
</html>