css p只显示两行

CSS P只显示两行 在网页的排版中，p标签是最常用的标签之一。通过p标签，我们可以将内容划分成一个一个的段落，并通过样式来控制段落的格式。而对于长段落的处理，我们通常会使用overflow:hidden来进行隐藏。但是，如果要限制p标签的高度，只显示两行，该怎么办呢？下面就来介绍一下如何实现这样的效果。 首先，我们需要给p标签设置一个固定的行高，比如说20像素（可以根据实际情况进行调整）。接着，在p标签上面加一个包裹层，比如说div标签，并设置该div标签的高度为40像素（即2行的高度）。然后，给p标签设置一个属性，将行数限制为2行。如下预示着这个思路的代码：

<div style="height: 40px; overflow: hidden;">
  <p style="line-height: 20px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;">
    这里放置需要限制2行的内容
  </p>
</div>

这段代码中，-webkit-line-clamp: 2;的作用是限制p标签的行数为2行，display: -webkit-box;和-webkit-box-orient: vertical;则可以让p标签在div标签内部垂直居中。至此，我们就实现了p标签只显示两行的效果。 总的来说，限制p标签的行数只需要通过一些CSS样式的设置就可以轻松完成。同时，该方法对于一些需要用到固定高度的场景也非常有帮助。希望本文的介绍对大家有所帮助！