需求来了，在某次产品迭代的时候加了一个小功能，就是当单元格中的文本内容超过20个字符的时候，需要截断。并显示20个字符+一个省略号，不超过，忽略。这个需求貌似不是很复杂，貌似用css可以搞定（我写css的时候好晕，想离它近一点），那就先搜索一下，还没敲完，会有提示“css限制显示的字数，超出长度的部分用省略号表示”，我的c，是不是很简单？我接受了挑战，添加了以下内容根据其他人的解决方案到单元格样式：/*td的superior和sibling标签由element*/elementelement>td{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}名字爱好个人介绍君子乐我是君子，正所谓窈窕淑女，我要什么，姑娘加个微信怎么样？贪心数钱我'我是七大罪的贪心者，不过我好像有点不对劲，因为贪心不应该只是为了钱吧？你可以在这个表格上试试，不过由于这是markdown生成的表格，有些样式需要自己改。下图是我在w3cSchool里随便找的一个表格改的样式。搞定，查看结果，准备收拾行李回家……但是，这个cell的高度不对，显示的内容也不对。我陷入了沉思……于是我在浏览器的控制台中加减了以下几项：text-overflow、overflow、width、height、max-xxx、padding、margin……但是发现没用，而且又陷入了沉思之中。这时候回头看那些博客记录的内容，发现都是用了p标签，没有用其他标签。想了想，或许问题就出在这里？于是改成p标签，然后加上上面的代码（还有一个margin:0），发现显示确实成功截断显示了。这里要注意，如果在td中加了div标签，那么就无法显示出预期的结果。如果一个属性white-space:nowrap;加上它可以消除换行，单行显示，那么也可以实现字符截断。但是这个时候，我又发现了一个问题。截短的长度似乎很难控制。如果只是汉字，那么可以使用width:20em或者width:10em（两行显示），但是显然，当使用英文的时候，这个属性就不能用了。所以换个思路。下面这篇文章以angular框架为例来讨论这个问题。当文本的字符数>=20时，会被截断显示，对吧？这段文字从何而来？响应式，它必须有绑定数据。你如何改变你说的直接写在标签上的文字？拿个头改一下……不对，这种情况不是DOM操作，用原生js或者jQuery都可以，但是在一个框架中使用原生js，有时候看着很远（不是基础，js是基础）
