Html 表格单元格宽度 - 固定宽度，换行/截断长字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/446624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table cell widths - fixing width, wrapping/truncating long words
提问by Richard Ev
I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a break in long words then that's OK.
我有一个包含各种长度文本的单元格的表格。所有表格单元格的宽度必须相同。如果这意味着截断长词或强制中断长词，那没关系。
I cannot figure out any way of getting this to work.
我想不出任何方法让这个工作。
This is for an internal client application so needs to work in IE6 and IE7 only.
这是用于内部客户端应用程序，因此只需要在 IE6 和 IE7 中工作。
An example page is below. The cell containing onereallylongwordis the offending one.
下面是一个示例页面。包含的单元格onereallylongword是有问题的单元格。
<!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>
<style type="text/css">
td { width: 30px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
采纳答案by Diodeus - James MacFarlane
Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.
Stack Overflow 通过使用 DIV 并使用overflow-x:auto. CSS 无法为您分解单词。
回答by inferis
As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :
只要您固定表格本身的宽度并设置 table-layout 属性，这非常简单：
<!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>
<style type="text/css">
td { width: 30px; overflow: hidden; }
table { width : 90px; table-layout: fixed; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
I've tested this in IE6 and 7 and it seems to work fine.
我已经在 IE6 和 7 中测试过它，它似乎工作正常。
回答by Katie
If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed;otherwise simply css can't break the long text in new lines.
如果你想在新行中正确包裹长文本，那么在你的表 id 调用中使用 css 属性，table-layout:fixed;否则简单的 css 无法在新行中打破长文本。
回答by Anupam
Try this:
尝试这个：
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
回答by shrimpwagon
I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.
我意识到你需要一个 IE6/7 的解决方案，但我只是把它扔给其他人。
If you can't use table-layout: fixedand you don't care about IE < 9 this works for all browsers.
如果您不能使用table-layout: fixed并且不关心 IE < 9，这适用于所有浏览器。
td {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
max-width: 30px;
}
回答by Mukund
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }
</style>
回答by Mukund
try td {background-color:white}
尝试 td {background-color:white}
It just worked for a column I didn't want to get trampled by a previous column's long text.
它只适用于我不想被前一列的长文本践踏的专栏。
