css2 做文字數超過容器後面接 '...'

http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ 可以容納全部文字時，不會有 '...'，有字被隱藏時才會出現。

改良後的作法 https://codepen.io/o_____o/pen/qxQRoM?editors=1100

原理

用 2 個偽元素：一個是 '...'；一個是遮住 '...' 的方塊。

• 兩個偽元素都設為絕對定位。
• ::before 是 "..."。定位 right: 0; bottom: 0，黏在容器右下角；
• ::after 自然是接在 "內容" 之後。是一遮蔽 "..." 的方塊。（它會黏在最後一個字後面，因為設了絕對定位，所以元素寬高不影響空間）。
• 但須將兩個偽元素設定與容器底色相同，讓偽元素能遮蔽東西。 如此當文字沒溢出時，兩個偽元素會重疊。

此新作法把 ::after 變成一個長度 100%（或高度 100%）的區塊， 不設定位點、黏在內容元素後面，這樣有大的空白也可以擋到右下的 "..."。

.block-with-text2 {
  position: relative;
  line-height: 1.2em;        // 設定 line-height 方便計算行高
  max-height: 3.6em;         // max-height = line-height * 行數
  overflow: hidden;
  background: #eff;          // **給底色
}

.block-with-text2:before,
.block-with-text2:after {
  position: absolute;
  height: 1.2em;
  background: inherit;       // **繼承底色
}

.block-with-text2:before {
  content: '...';
  bottom: 0;                 // 黏在容器右下角
  right: 0;
  width: 1em;
  color: red                 // debug 換個顏色看在哪裡
}
.block-with-text2:after {
  content: '';
  width: 100%;
  background: rgba(blue, .5);    // debug 換給個底色看方塊在哪裡 
}