table表格中text-overflow失效解決方案

admin發表於2017-02-28

使用CSS也是可以實現擷取字串功能，並且能夠將多餘的字元以省略號的方式替代，我們用的就是text-overflow屬性，只要將屬性值設定為ellipsis，同時配合white-space:nowrap和overflow:hidden，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#thediv{ 
  width:200px;
  height:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
} 
</style> 
</head> 
<body>
<div id="thediv">只有努力奮鬥才會有美好的明天。</div>
</body>
</html>

以上程式碼可以實現擷取字串，多餘的以省略號顯示效果。但是上面的程式碼對於table卻不好用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
td{ 
  width:150px;
  height:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid red
} 
</style> 
</head> 
<body>
<table>
  <tr><td>只有努力奮鬥才會有美好的明天</td></tr>
</table>
</body>
</html>

以上程式碼並不好用，程式碼改造如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table{ 
  table-layout:fixed;
  width:120px;
}
table td{
  overflow:hidden;  
  text-overflow:ellipsis; 
  white-space: nowrap; 
}
</style> 
</head> 
<body>
<table>
  <tr><td>只有努力奮鬥才會有美好的明天</td></tr>
</table>
</body>
</html>

相關文章