溢出问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
li{
height:20px;
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.text-overflow {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th scope="col" width="100px;">姓名</th>
<th scope="col" width="100px;">年龄</th>
</tr>
<tr>
<td style="height:20px; border:1px solid #0FF; width:100px; margin-top:100px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">分店洒家咖啡店开房间卡仕达发给合法化2</td>
<td style="height:20px; border:1px solid #0FF; width:100px; margin-top:100px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<h3>Firefox，Chrome，Safari，Opera等浏览器较新版本均支持：text-overflow:ellipsis;了</h3>
<h4>-webkit-text-overflow:ellipsis; 针对谷歌浏览器写的</h4>
<h1>文本内容的溢出问题</h1>
<div class="text" style="height:39px; border:1px solid #0FF; width:100px; overflow:hidden;text-overflow:ellipsis;"><nobr>阿德话费卡四方达按时款到发货第三方</nobr> </div>
<div style="width:100px;height:20px;overflow:hidden;text-overflow:ellipsis; margin-top:20px;" title="文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字"> <nobr>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</nobr> </div>
<div>
<h1>li标签内容的溢出问题</h1>
<ul>
<li>ewr是的法国人</li>
<li>发的是公司地方官但是发给是大法官福德宫</li>
<li>但是发给是大法官是的发给是大法官</li>
<li>大师傅给我二惹我提供沃尔特</li>
<li>我二哥微软给我儿童wretch我二人太味儿 </li>
<li>DST惹他娃儿头尾我让他玩儿他</li>
<li>而我沃尔特我认识的官方申达股份撒地方</li>
<li>玩儿我儿童舞而第三方</li>
<li>第三方师傅该死的返回</li>
<li>是的发给是大法官是梵蒂冈是梵蒂冈是大法官是的</li>
</ul>
</div>
<h1>a标签以及b标签内容溢出问题</h1>
<a href="#" class="text-overflow" style="width:110px;">测试文字能否被截取</a><br>
<b class="text-overflow" style="width:100px;">测试文字能否被截取</b>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
li{
height:20px;
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.text-overflow {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th scope="col" width="100px;">姓名</th>
<th scope="col" width="100px;">年龄</th>
</tr>
<tr>
<td style="height:20px; border:1px solid #0FF; width:100px; margin-top:100px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">分店洒家咖啡店开房间卡仕达发给合法化2</td>
<td style="height:20px; border:1px solid #0FF; width:100px; margin-top:100px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<h3>Firefox，Chrome，Safari，Opera等浏览器较新版本均支持：text-overflow:ellipsis;了</h3>
<h4>-webkit-text-overflow:ellipsis; 针对谷歌浏览器写的</h4>
<h1>文本内容的溢出问题</h1>
<div class="text" style="height:39px; border:1px solid #0FF; width:100px; overflow:hidden;text-overflow:ellipsis;"><nobr>阿德话费卡四方达按时款到发货第三方</nobr> </div>
<div style="width:100px;height:20px;overflow:hidden;text-overflow:ellipsis; margin-top:20px;" title="文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字"> <nobr>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</nobr> </div>
<div>
<h1>li标签内容的溢出问题</h1>
<ul>
<li>ewr是的法国人</li>
<li>发的是公司地方官但是发给是大法官福德宫</li>
<li>但是发给是大法官是的发给是大法官</li>
<li>大师傅给我二惹我提供沃尔特</li>
<li>我二哥微软给我儿童wretch我二人太味儿 </li>
<li>DST惹他娃儿头尾我让他玩儿他</li>
<li>而我沃尔特我认识的官方申达股份撒地方</li>
<li>玩儿我儿童舞而第三方</li>
<li>第三方师傅该死的返回</li>
<li>是的发给是大法官是梵蒂冈是梵蒂冈是大法官是的</li>
</ul>
</div>
<h1>a标签以及b标签内容溢出问题</h1>
<a href="#" class="text-overflow" style="width:110px;">测试文字能否被截取</a><br>
<b class="text-overflow" style="width:100px;">测试文字能否被截取</b>
</body>
</html>