移动端常见问题单行和多行文字溢出省略

单行文字溢出省略:

给容器添加css样式:

.text-ellipsis{
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

 

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"title>Document</style>
        div{
            width:200px;
            background-color lightblue
            margin0 auto;
        }
        .text-ellipsis
            overflowhidden
            text-overflow ellipsis
            white-space nowrap}
    bodydiv class="text-ellipsis">
        欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代
    divhtml>

 

 

如果容器使用了flex布局:

此时单行文字省略会出问题


            display flex
            justify-content center
            align-items>

 

 

解决方法:不能直接一起使用,可以加个span包裹住文字,在span标签上设置文字溢出隐藏

>
        span >欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代span>

 

 

多行文字溢出省略:

这个也是可以实现的,但是兼容性不太好,只兼容webkit内核的

180px
        .multiline-ellipsis-webkit-box/*流布局*/
            -webkit-line-clamp 33行
            -webkit-box-orient vertical从顶部向底部垂直布置子元素 normal !important
            word-wrapbreak-word允许长单词换行到下一行*/

        ="multiline-ellipsis">

 

 

注意这里有个坑,那就是父元素高度最好自适应,高度过小或者过大都会崩

高度过小无法显示完整行数:


            height50px>

 

 高度过大,在省略号之后还会继续显示……

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码