需要时，CSS垂直对齐带有多行省略号的文本

Question

我有一个固定大小的容器，我希望在其中显示具有已知字体大小，行高等的可变长度多行文本。

• 如果文本适合容器内部：它垂直居中
• 如果它不适合容器内：
  • 任何溢出都是以每行为基础隐藏的（即最后一行是完全显示或隐藏但不是半隐藏）
  • 文本从头开始显示（而不是仅显示由于垂直居中而显示的中间部分）
  • 文本中附加了一个省略号（通过CSS hack附加了一个省略号）或

作为奖励，如果有更多带有滚动文字的动态解决方案或通过JavaScript自动插入“阅读更多...”，请提及这些或发布链接。

对于从IE9开始的旧版浏览器，该解决方案应该起作用或者至少具有优雅的回退（不关心旧版本的IE）。

示例用法：在固定大小的语音气泡中发表评论：

编辑：

我想我可以使用

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: @line-height;     /* fallback */
   max-height: @max-height;      /* fallback */
   -webkit-line-clamp: @line-number; /* number of lines to show */
   -webkit-box-orient: vertical;

但是，首先，它只是webkit。其次，更重要的是，当 适合容器内部时，如何将文本垂直居中？

Answer 1

您应该可以在css中使用text-overflow: ellipsis;属性。就垂直对齐而言，我始终建议使用flexbox并将display: flex;与align-items: center一起使用。

编辑：Flexbox在IE9中不起作用。在这种情况下，我建议将文本包装在另一个div中并给它margin: auto;这将把它放在div的中间。