实现单行文本居中和多行文本左对齐并超出显示"..."

实现单行文本居中和多行文本左对齐并超出显示"..."

• 单行文本居中。在

  webkit

  内核中适用。非

  webkit

  内核，可以是用 js 或者用

  ::after

  模拟。

   .single-text{ width: 500px; font-size: 18px; font-weight: bold; text-align: center; color: white; background: lightblue; display: box; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

• 多行文本左对齐。多行文本没有很好的解决方法，只能依赖 js 或者 css 的相对定位。

   .multi-text{ width: 50%; height: 4.5rem; line-height: 1.5; padding: 20px; background: lightblue; overflow: hidden; position: relative; box-sizing: border-box;  &::after{ content: '...'; height: 1.5rem; position: absolute; bottom: 5px; right: 5px; } }

示例代码：https://prepen.io/Konata9/pen/RwbYbRG