如何阻止HTML表被内容支撑？_Html_Html Table

如何阻止HTML表被内容支撑？

html

如何阻止HTML表被内容支撑？,html,html-table,Html,Html Table,对于某些HTML，如下所示： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> td { width:10px; } </style> </head> <body> <table> <tr>&

对于某些HTML，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    td {
      width:10px;
    }
  </style>
</head>
<body>
  <table>
    <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
    <tr><td>WHOA I'M A LONG STRING!</td><td>Text</td><td>Text</td><td>Text</td></tr>    
  </table>
</body>
</html>


JS-Bin
运输署{
宽度：10px；
}
文本文本文本文本
文本文本文本文本
哇，我是一根长长的绳子！文本文本文本

td

s的宽度不是10px，它们与其中最长的字符串一样长

您是如何做到这一点的？

您可以将css更改为：

max-width: 10px;
overflow: hidden;

但这将切掉中间字母的单词，不管边缘在哪里。

我想你所能做的就是将内容包装在一个div中，并给div一个宽度和溢出：hidden。它切断了文本（或内容），因此这可能不是您想要的