表格单元格宽度 - 固定宽度、换行/截断长单词

Question

表格单元格宽度 - 固定宽度、换行/截断长单词

htmlcssuser-interfacehtml-table

40

我有一个表格，其中包含不同长度文本的单元格。所有表格单元格的宽度必须相同。如果这意味着截断长单词或强制换行，则可以这样做。

我无法想出任何方法使其工作。

这是为内部客户端应用程序而设计的，因此只能在IE6和IE7中使用。

下面是一个示例页面。包含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>

- Richard E

本质上是[https://dev59.com/nUbRa4cB1Zd3GeqPxifd]的副本。遗憾的是，我所知道的最好的答案是将`<td>内容包装在<div>中，并将固定宽度和溢出应用于该<div>`。 - annakata

7个回答

21

如果您希望长文本在新行中正确换行，则在您的表格ID上调用使用CSS属性table-layout：fixed;，否则简单的CSS无法将长文本断开成新行。

- Katie

非常棒。设置后运行得很顺畅。 - NLV

2

谢谢！解决了80%的问题。 - Julian Mann

1

请 @stackoverflow，将此答案显示在顶部。完美而简单的解决方案。先尝试了上面的几个，然后才意识到这个更好。 - Stephan Hoyer

这个sln.最好，因为它允许对整个表格应用样式，而不仅仅是单元格的内容。 - count0

17

Stack Overflow 使用 DIV 并设置 overflow-x:auto 解决了类似长行代码的问题。CSS 无法为您分解单词。

- Diodeus

4

自动溢出会导致滚动条的添加 - 在我的情况下，看起来使用overflow: hidden会更好。 - Richard Ev

3

word-wrap: break-word 不会将单词断开吗？ - Iulian Onofrei

1

它会在空格处断开，但不会在超长的单词处断开。 - Diodeus - James MacFarlane

5

@Diodeus，"word-break: break-all;"是什么意思？ - Mohd Abdul Mujib

尝试使用 white-space: nowrap; - msilveus

CSS可以为您分解单词：https://dev59.com/A3M_5IYBdhLWcg3wt1rD - Tropicalrambler

12

试试这个：

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;

- Anupam

3

<style type="text/css">
td { word-wrap: break-word;max-width:50px; }            
</style>

- Mukund Thakkar

2

我知道您需要解决IE6/7的问题，但我想为其他人提供帮助。

如果您无法使用table-layout: fixed，并且您不在意IE < 9，则此方法适用于所有浏览器。

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}

- shrimpwagon

-7

尝试 td {background-color:white}

它刚好适用于我不想被前一列的长文本所淹没的列。

- user90588

我不确定那会起作用 - 前一列的长文本肯定会导致该列的宽度扩展。您能否编辑您的回复，包含一个示例HTML片段以说明？ - Richard Ev

2

我不明白将背景颜色设置为白色如何有助于这里的问题？ - dwarfy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- inferis · Accepted Answer

只要你固定表格本身的宽度并设置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>

我已经在IE6和7中进行了测试，看起来它可以正常工作。