文本溢出：单行文本，多行文本溢出显示省略号

最新推荐文章于 2022-03-11 11:35:35 发布

伏见伊奈里

最新推荐文章于 2022-03-11 11:35:35 发布

阅读量833

点赞数

分类专栏： CSS 前端综合

本文链接：https://blog.csdn.net/qq_35313994/article/details/52327062

版权

前端综合同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

//单行文本溢出

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>text overflow ellipsis</title>  
    <style>  
        .box {  
            width: 200px;  
            white-space: nowrap;  //文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
            overflow: hidden;  //隐藏溢出
            text-overflow: ellipsis;  //显示省略符号来代表被修剪的文本。css3属性
        }  
    </style>  
</head>  
<body>    
<div class="box">娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛</div>
</body>  
</html>

//多行文本溢出

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>text overflow ellipsis</title>  
    <style>  
        .box {
           width:200px;  
           display: -webkit-box;   
           -webkit-box-orient: vertical;   
           -webkit-line-clamp: 3;   
           overflow: hidden;      
  
        }  
    </style>  
</head>  
<body>    
<div class="box">娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛娜娜米萨玛</div>   
</body>  
</html>

伏见伊奈里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本溢出：单行文本，多行文本溢出显示省略号

单行文本溢出隐藏出现省略号 text overflow ellipsis //多行文本溢出隐藏出现省略号 .box { width: 200px; white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到标签为止 overfl
复制链接

扫一扫