內容超出顯示省略號：
<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屬性，這樣鼠標移動到該元素會自動顯示所有的文字。