css 多行文本换行，如果里面有标签怎么办？

Question

<div>
    <p>这里是一行</p>
    <p>这里是一行这里是一行这里是一行</p>
    <p>这里是一行这里是一行这里是一行</p>
</div>

// css
div {
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
p {
  margin: 0;
}

出来的效果是这样，但我希望在div的第三行截取，无论里面有没有段落都截取掉，而不是p标签的第三行截取。

我需要的效果是这样，如何做呢？谢谢~

Answer 1

用css选择器选择最后一行，然后对最后一行做超出就做省略号

Answer 2

那就别用<p>标签了，换成 <span>或者设置：

p {
  margin: 0;
  display:inline;
}

Answer 3

解决了，解决思路是：
首先，将块元素全部换为inline
随后在每一个标签上加::after {content: 'A'; white-space: pre;}
就可以不用段落的形式，但是展示出来却像段落一样！！

<div>
    <span>这里是一行</span>
    <span>这里是一行这里是一行这里是一行</span>
    <span>这里是一行这里是一行这里是一行</span>
</div>

// css
div {
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
span::after {
    content: '\A';
    white-space: pre;
}