css--溢出文本省略号显示--单行、多行

最新推荐文章于 2024-09-05 15:51:55 发布

米卡小米

最新推荐文章于 2024-09-05 15:51:55 发布

阅读量139

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/cmy741741/article/details/125290384

版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用CSS处理单行和多行文本溢出问题，通过white-space、overflow和text-overflow属性实现文本的隐藏与省略号显示。示例代码演示了在100px宽的div中，当文本溢出时如何优雅地展示部分内容并用省略号标记剩余内容。此方法适用于WebKit浏览器和移动端。

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

1.单行文本溢出

1.强制一行内显示文本 white-space: nowrap

2.溢出部分隐藏 overflow : hidden;

3.文字溢出用省略号显示 text-overflow : ellipsis

<!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>Document</title>
    <style>
        div{
            background-color: blanchedalmond;
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        市场部那些绝非和他发我看看初步报价打开
    </div>
</body>
</html>