html - 如何使列(包含带空格的文本)的宽度适合 HTML 表格中的内容？

Question

我最近试图弄清楚如何使单元格/列的宽度适合其内容。我在 stackoverflow 上发现了一个问题，它似乎完全符合我正在寻找的内容:How to make width of a column fit to its contents in HTML table?

我的问题是，当我向单元格内容添加空格时，它添加了一个回车符并将下一个单词向下移动到一行。

所以这段代码:

<div style="max-width:700px;">
<table border="1">

    <tr><td width="1px">Papua New Guinea:</td><td >Goroka</td></tr>
    <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
</table>

生成此表:

http://cl‍.ly/image/2F0V1J3V2u22

相反，这就是我想要的:

http://cl‍.ly/image/2m0a0m0t0L0v

我意识到用 代替空格可以解决这个问题。我的问题是，这是在邮件通讯模板中使用的，并且该单元格中的文本是动态的。有时有空格，有时没有。例如昨天说玻利维亚，今天说巴布亚新几内亚，这就是我注意到问题的时候。

Answer 1

你尝试过吗

td {
    white-space: nowrap;
}

http://jsfiddle.net/QkNqk/

您还可以使用

td {
    white-space: pre;
}

让源中的换行符创建中断。因此，只要没有换行符，文本就会保持在一行