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

本文介绍两种在网页上实现文本不换行且多余部分显示为省略号的方法。一种适用于单行文本,通过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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值