html - 如何使用列计数样式获取省略号

Question

如果内容被 overflow: hidden; 截断，是否有办法在第三列(由 column-count 生成)末尾获得省略号。仅使用 CSS 的首选方式。像这样的东西:

data    data    data
data    data    data  
data    data    data  
data    data    ...

<ul style="list-style: none; -moz-column-count: 3; height: 5em; overflow: hidden; text-overflow: ellipsis;">
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li>data</li>
</ul>

Demo

Answer 1

根据docs对于 text-overflow 你不能这样做:

This property only affects content that is overflowing a blockcontainer element in its inline progression direction (not textoverflowing at the bottom of a box, for example).

行内行进方向当文本方向为 LTR 时应读作从左到右。

这里有一篇关于该主题的专门且不老的文章:http://css-tricks.com/line-clampin/