css文字纵向排列超出省略号

CSS 中，你可以使用 `text-overflow` 属性来控制当文本溢出元素边界时的行为。当你想要在内容超过容器长度时显示省略号并保持文字垂直排列时，可以这样做：

.container {
  height: 50px; /* 设置一个固定的行高 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
  display: -webkit-box; /* Webkit内核（如Safari和Chrome）需要这个 */
  -webkit-line-clamp: 1; /* 显示单行 */
  line-clamp: 1; /* Firefox 和 其他现代浏览器 */
  white-space: nowrap; /* 文本不会换行，保持在同一行 */
  vertical-align: middle; /* 如果有行高，让垂直居中显示 */
}

这里 `-webkit-line-clamp` 和 `line-clamp` 是用来限制行数的，它们并不是所有浏览器都支持，所以需要加上兼容处理。