css文本显示两行后超出用省略号代替

最新推荐文章于 2024-04-26 14:42:49 发布

coodingcc

最新推荐文章于 2024-04-26 14:42:49 发布

阅读量734

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/cristina_song/article/details/88764023

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

1. 强制一行的情况很简单

  <style type="text/css">
        div{
            width: 200px;
            height: 300px;
            border:1px solid blue;
        }
        span{
            border:1px solid red;
            display: inline-block; //不独占一行的块级元素
            width: 100px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
    </style>
    <body>
   <body>
    <div>
        <span>第二讲：分解因式第二讲分解因式分解因式第二讲分解因式分解因式第二讲分解因式分解因式第二讲分解因式分解因式第二讲分解因式分解因式第二讲分解因式分解因式第二讲分解因式</span>
    </div>
   </body>

注意：行内元素设置width无效，所有要加 display: inline-block;
white-space 属性设置如何处理元素内的空白。用得最多的是white-space:nowrap;禁止文本折行
可能的值

2.如果要强制两行的话，得用到css3的知识

   span{
            border:1px solid red;
            display: inline-block;
            width: 100px;
            overflow:hidden;
            text-overflow:ellipsis;
            /*white-space:nowrap;*/
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
        }

在实际项目中，我们会发现-webkit-box-orient没有生效，需要加入如下注释
/*! autoprefixer: off */
如果要强制三行的话，同理：-webkit-line-clamp:3

coodingcc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css文本显示两行后超出用省略号代替

1. 强制一行的情况很简单 <style type="text/css"> div{ width: 200px; height: 300px; border:1px solid blue; } span{ border:1px solid ...
复制链接

扫一扫