文本不换行，多余的内容显示省略

最新推荐文章于 2023-10-17 14:22:12 发布

置顶小皮皮不皮

最新推荐文章于 2023-10-17 14:22:12 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/81017151

css 专栏收录该内容

29 篇文章

订阅专栏

本文介绍两种在网页上实现文本不换行且多余部分显示为省略号的方法。一种适用于单行文本，通过white-space和text-overflow属性实现；另一种适用于多行文本，采用-webkit-box等属性实现。

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

/**有时候经常会在一些提示标题中或者表单、表格中用到，或者实现一个留言效果的时候，

可以像微信一样当字数多得时候使用省略号来隐藏部分内容，当我要看全文的时候，点击查看讲内容全部展开，具体方法就不说了，下面给大家两种实现文本不换行，多余的显示省略号得代码两种有时候有着不同的用途，具体使用方法就不多说了**/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul{
            width: 500px;
            height: 100%;
            margin: 50px auto;
        }
        ul li{
            max-width: 500px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid powderblue;
        }
        #box li{ /**第一种*/
            white-space: nowrap;    /*规定文本不换行**/
            text-overflow: ellipsis;  /**显示省略符号来代表被修剪的文本。*/
            overflow: hidden;
        } 
        #big li { /**第二种*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;   /** 多行文本溢出...*/
            overflow: hidden; 
        }
    </style>
</head>
<body>
<ul id="box">
    <li>焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市 </li>
    <li>大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市</li>
    <li>时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市 </li>
    <li>军全面建成世界一流海军海军全面建成世界一流海军 </li>
    <li>市会议召开 话 出席 席市委常委会议召开 主持并讲话宪廷出席 列席</li>
</ul>
<ul id="big">
    <li>将聚焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市 </li>
    <li>5日-7日在北京长城饭店举办。本届大会将聚焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市</li>
    <li>5日-7日在北京长城饭店举办。本届大会将聚焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市</li>
    <li>聚焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市</li>
    <li>焦智能时代，大数据技术的发展曲线以及大数据与社会各行业相结合的最新实践进展。除了主论坛之外 ，主办方还精心策划了数十场专题技术和行业论坛，包括新一代数据库转型、人工智能赋能金融科技、AutoML大数据自动化机器学习技术与系统、大数据时代的因果推断、大数据安全和治理、多模态知识图谱、大数据与AI中台、物流大数据、工业与制造业大数据、数据驱动与城市</li>
</ul>

</body>
</html>