HTML 表格 - 如何使 IE 不在连字符处换行

Posted 2023-02-18

【中文标题】HTML 表格 - 如何使 IE 不在连字符处换行

【英文标题】：HTML Tables - How to make IE not break lines at hyphens

【发布时间】：2010-12-06 19:42:44

【问题描述】：

我有一些包含日期格式如下的表格单元格：2009-01-01。 I.E 7 似乎在连字符处将它们分成两行。有什么办法可以关闭它？

【参考方案1】：

您正在寻找white-space property，它可以让您控制空白和换行符如何影响元素的内容。要折叠空白序列，但防止换行，您可以使用 nowrap 值：

.dates 
    white-space: nowrap;

<td class="dates">2009-01-01</td>

【参考方案2】：

我确信有更好的 CSS 方式，但旧的方式是使用 no-break：<nobr>...</nobr>，但使用 no-break 会导致 nothing 转到下一行。

另一种方法是使用Non-breaking hyphen。这样，您仍然可以换行，只是不在连字符处。

【讨论】：

不间断的连字符是要走的路。 +1

【参考方案3】：

使用这个 CSS：

.nowrap 
    white-space: nowrap;

将您的日期包装为：<span class="nowrap">2009-01-01</span>。

编辑：与其他解决方案相比，此解决方案的优势在于它可以让您更精确地控制应该或不应该换行的内容。您的单元格可能仍会在跨度之外换行空格和其他连字符。

【参考方案4】：

我已经尝试了所有这些建议。没有工作。在另一个 Stack Overflow 页面上找到了解决方案：No line-break after a hyphen。您可以使用代码作为不间断连字符 ‑。

【参考方案5】：

增加你的TD的大小，这不会是一个问题

【参考方案6】：

这是不是回答您问题的正确方法，但我就是这样做的：

<td>Hello&nbsp;-&nbsp;World</td>

我更喜欢这种方法，因为您不需要添加<style> 或类属性。此外，它使文本 one 字符串，使其不能被浏览器换行。

就像我说的，大多数人会不同意，但我认为这是实际解决方案比标准解决方案更好的地方。

【讨论】：

您提出的解决方案在问题中没有空格的地方添加了空格，并且很可能无论如何都允许在连字符处换行。

【参考方案7】：

我的愚蠢错误是我在使用填充设置间距时忘记在它们之间放置空格。我曾经喜欢 <span>Bla 1</span><span>Bla 2</span><span>Bla 4</span> 它并没有像我认为的那样打破界限。所以现在我有：<span>Bla 1</span> <span>Bla 2</span> <span>Bla 4</span> 当然，它应该按预期工作。

也许我的错误会帮助别人......