对于非表格的内容采用如下方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字超出长度用省略号显示</title>
<style type="text/css">
p{
width:10em;/*保证文字不会被半汉字截断,显示10个文字*/
overflow:hidden;/*超出长度的文字隐藏*/
text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
white-space:nowrap;/*强制不换行*/
border:1px solid red;
}
</style>
</head>
<body>
<p title="我是中国人,这是一个很骄傲的称呼">我是中国人,这是一个很骄傲的称呼</p>
</body>
</html>
对于表格则需提前设置表格的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字超出长度用省略号显示</title>
<style type="text/css">
table{
table-layout: fixed;/*只有定义表格的算法为fixed,th才有效果*/
border-collapse: collapse;/*边框合并模式*/
}
table tr th{
overflow:hidden;/*超出的文字隐藏*/
text-overflow:ellipsis;/*文字超出后,显示省略号*/
width:100%;
white-space:nowrap;/*文字不换行*/
word-break:keep-all;/*文字不换行*/
}
</style>
</head>
<body>
<table width="300" border="1">
<tr>
<th title="年度统计数据">年度统计数据</th>
<th title="季度统计数据">季度统计数据</th>
<th title="月份统计数据">月份统计数据</th>
</tr>
<tr>
<td>3000</td>
<td>2000</td>
<td>1000</td>
</tr>
</table>
</body>
</html>