css实现两行文本，第二行溢出出现省略号

HTML代码：

<div class="container">
  <span class="text">这是第一行文本</span>
  <span class="text">这是第二行文本，如果超出容器宽度则显示省略号</span>
</div>

CSS代码：

.container {
  width: 200px; /* 设置容器宽度 */
  height: 50px; /* 设置容器高度，容器高度需要限定，以使第二行文本可以溢出 */
  overflow: hidden; /* 当文本溢出容器时进行隐藏 */
}

.text {
  display: -webkit-box; /* 将文本显示为块元素 */
  -webkit-line-clamp: 2; /* 设置最大显示行数为2 */
  -webkit-box-orient: vertical; /* 设置块元素内部文本垂直排列 */
  overflow: hidden; /* 当文本溢出块元素时进行隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

通过设置-webkit-line-clamp属性为2，限制了文本显示的最大行数，超过两行的文本将被隐藏。然后，通过设置text-overflow: ellipsis和overflow: hidden，当文本溢出容器时会显示省略号。