<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cla1{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 50px;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}
</style>
</head>
<body>
<span class="cla1">span, no ellipsis</span>
<br />
<span class="cla1 inline-block">inline-block ok</span>
<span class="cla1 block">block okokokok</span>
<p class="cla1">p, default is block</p>
<table>
<tbody>
<tr><td class="cla1">table-cell</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td class="cla1 block">table's block, ok</td></tr>
</tbody>
</table>
</body>
</html>
解釋：
overflow: hidden; 禁止滾動條
white-space: nowrap; 不換行
text-overflow: ellipsis; 超出長度部分以省略號顯示
width: 50px; 設置長度
需要注意的是，text-overflow: ellipsis;對元素的display屬性有要求，需要爲block或者inline-block。span標籤的默認值爲inline，td的爲table-cell，需要改爲block或者inline-block。