html如何实现让超出的内容显示为省略号

来源：互联网发布：怀化学院网络管理系统编辑：程序博客网时间：2024/05/25 05:36

对于非表格的内容采用如下方法

<!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>

0 0