• 技术文章 >web前端 >css教程

    css怎么实现超出两行显示省略

    藏色散人藏色散人2021-04-02 14:45:44原创68

    css实现超出两行显示省略的方法:首先创建一个HTML示例文件;然后在body中定义好文字内容;最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。

    本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

    CSS实现文本超过部分,超出两行,超出部分省略号显示

    文字超过部分显示为省略号

    <style>
    .p{
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
    <body>
        <p class="p">
            我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
        </p>
    </body>

    文本超出两行,超出部分省略号显示

    <style>
    .p{
        width: 200px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
    }
    </style>
    <body>
        <p class="p">
            我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
        </p>
    </body>

    推荐学习:《css视频教程

    以上就是css怎么实现超出两行显示省略的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:纯CSS如何实现图片轮播 下一篇:css清除浮动的方法有哪些
    第15期线上培训班

    相关文章推荐

    • css实现文字过长显示省略号• CSS3中text-overflow实现文章标题带省略号的显示效果(代码实例 )• css实现文字不换行溢出显示省略号• css如何实现文本多行省略号

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网