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

一开始，我是让div包裹多个p标签，并让div“flex”布局，且单行溢出隐藏，但是发现当父元素或当前元素有flex时，text-overflow: ellipsis;是不生效的
大多数解决办法都是，不要flex，大概给div下的每个p标签单独设置样式。
由于我如今写的功能，p标签是v-html解析出来的，无法得知详细有多少个p标签，因此都不适用
我想实现的功能是多个p标签一行展示，溢出div宽度时，隐藏余下内容…显示
效果图

html

1. <div class="hide">
2.         <p>111111</p>
3.     <p>222222</p>
4.     <p>333</p>
5.     <p>44444444444444</p>
6. </div>

复制代码

css

1. .hide{
2.         width: 200px;
3.         height: 50px;
4.         line-height: 50px;
5.         border: 1px solid #ccc;
6.         text-overflow: ellipsis;
7.         overflow: hidden;
8.         white-space: nowrap;
9. }
10. p{
11.     display: contents;
12. }

复制代码

亲测有用！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。