张国伟 发表于 2024-6-13 15:51:50

多个p标签一行展示,溢出隐藏

一开始,我是让div包裹多个p标签,并让div“flex”布局,且单行溢出隐藏,但是发现当父元素或当前元素有flex时,text-overflow: ellipsis;是不生效的
大多数解决办法都是,不要flex,大概给div下的每个p标签单独设置样式。
由于我如今写的功能,p标签是v-html解析出来的,无法得知详细有多少个p标签,因此都不适用
我想实现的功能是多个p标签一行展示,溢出div宽度时,隐藏余下内容…显示
效果图
https://img-blog.csdnimg.cn/direct/dfbb6d0b8fe24e31bb6263a10f27e968.png
https://img-blog.csdnimg.cn/direct/4080366123404b4bb5b65d76803a8693.png
html
<div class="hide">
        <p>111111</p>
    <p>222222</p>
    <p>333</p>
    <p>44444444444444</p>
</div>
css
.hide{
        width: 200px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #ccc;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
}
p{
    display: contents;
}
亲测有用!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 多个p标签一行展示,溢出隐藏