内容超出显示省略号：
<html> <style> table { table-layout: fixed; width: 100%; } table, th, td { border: 1px solid #999; padding: 5px; text-align: left; } td.desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <table> <thead> <tr> <th class="desc">项目名</th> <th width='20%' class="desc">Url</th> <th width='40%' class="desc">描述</th> <th>语言</th> <th class="number desc">Stars</th> </tr> </thead> <tbody> {% for source in sources %} <tr> <td class="desc" title="{{ source.name }}">{{ source.name }}</td> <td class="desc" title="{{ source.url }}">{{ source.url }}</td> <td class="desc" title="{{ source.description }}">{{ source.description }}</td> <td class="desc" title="{{ source.primary_lang }}">{{ source.primary_lang }}</td> <td>{{ source.stars }}</td> </tr> {% endfor %} </tbody> </table> </html>
注意：
1、 table 设置：
table-layout:fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
table的width 也要设置;
2、th, td 的设置：
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
3、这些样式必须在 th, td 都写才有效果，并且th, td 还要定义属性width。
另外，省略的文字如果想展示，
可以给td添加title属性，这样鼠标移动到该元素会自动显示所有的文字。