css三行显示第三行限制宽度

CSS三行显示第三行限制宽度是CSS技术中的一种文本展示方式。该技术的基本思路是将需要展示的文本内容分为三行，其中第三行的宽度将限制在一个指定的范围内，以达到更好的排版效果。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

p:nth-of-type(3) {
  width: 50%;
} 

上述代码中，我们首先使用CSS的display: -webkit-box;属性将段落元素的显示方式设置成了一个盒模型，之后通过-webkit-box-orient: vertical;属性将元素内部的内容竖直排列。通过-webkit-line-clamp: 3;属性限制了元素展示三行文本内容，并将多余的内容隐去。最后通过overflow: hidden;属性实现内容溢出隐藏的效果。

紧接着，在第三个段落元素上使用p:nth-of-type(3)的伪选择器定位到了第三行文本，并使用width: 50%;的属性将其展示的宽度设置为了50%。这样便实现了第三行文本的宽度限制，同时不影响前两行文本的展示效果。

在实际应用中，CSS三行显示第三行限制宽度技术常被用于设计精美的文本排版、长文字列表展示、新闻资讯等场景中。