css文本一行和两行，超出省略表示及超过2行... 展开-收起

CSS 中控制文本溢出并显示省略标记通常通过 `overflow`, `text-overflow` 和 `display` 属性结合使用。当文本内容超出了其容器的宽度，并且设置了 `overflow: hidden;` 或 `overflow-wrap: break-word;` 时，超出的部分会被隐藏。

对于单行文本，可以设置 `line-clamp` 属性，指定显示的最大行数。例如：

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 对于 Safari 等 WebKit 内核浏览器 */
  display: -moz-box;     /* 对于 Firefox 等 Gecko 内核浏览器 */
  display: box;
  line-clamp: 2; /* 显示最多2行 */
  max-height: calc(2em); /* 假设每行高度为1.5em，计算总高度限制 */
}

而对于两行以上的展示，如果需要用户手动查看全部内容，可以在元素上添加一个点击事件，如 `:hover` 或者鼠标悬停效果，然后切换到 `display: block;` 来展开完整内容：

.expanded-text {
  overflow: auto;
  display: none;
}

.text-truncate:hover .expanded-text {
  display: block;
}