PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

    css设置单行显示省略号和多行显示省略号

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:css设置单行显示省略号和多行显示省略号
    一、单行显示省略号
    width: 239px;/*要显示文字的宽度*/
    overflow:hidden; /*超出的部分隐藏起来。*/
    white-space:nowrap;/*不显示的地方用省略号...代替*/
    text-overflow:ellipsis;/* 支持 IE */
    二、多行显示省略号
    设置为两行显示省略号时,高度设置为行高的二倍即可;
    overflow:hidden; /*超出的部分隐藏起来。*/
    text-overflow:ellipsis;/* 支持 IE */
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
    -webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-70-5508-1.html
    相关热词搜索: