CSS HTML表格 – 如何使IE不在连字符处断行

在本文中，我们将介绍如何使用CSS来控制HTML表格中的连字符断行问题，以解决在Internet Explorer (IE)浏览器中出现的问题。

阅读更多：CSS 教程

问题背景

当在HTML表格中使用连字符时，一些浏览器（特别是IE）会在连字符处自动断行，导致表格内容排版不美观。这个问题尤其常见于较长的单词或网址。

解决方案

为了解决这个问题，我们可以使用CSS属性来控制连字符断行的行为。具体而言，我们可以使用word-wrap和-ms-word-break属性来在IE浏览器中避免在连字符处断行。

示例说明

首先，让我们创建一个简单的HTML表格，其中包含一些长单词，以模拟我们在实际开发中遇到的情况。

<table>
  <tr>
    <th>名称</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>superlongword</td>
    <td>A very long word that may cause line break at hyphens</td>
  </tr>
  <tr>
    <td>some-long-url</td>
    <td>A long URL that may also break at hyphens</td>
  </tr>
</table>

接下来，我们将使用CSS来避免在IE浏览器中断行。为了实现这一点，我们可以添加以下样式到我们的CSS文件中：

table {
  word-wrap: break-word;
  -ms-word-break: keep-all;
}

这里的word-wrap: break-word;属性将允许长单词在连字符处断行，而-ms-word-break: keep-all;属性将告诉IE浏览器在连字符处不断行。

将上述CSS样式应用到我们的HTML表格中：

<head>
  <style>
    table {
      word-wrap: break-word;
      -ms-word-break: keep-all;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>名称</th>
      <th>描述</th>
    </tr>
    <tr>
      <td>superlongword</td>
      <td>A very long word that may cause line break at hyphens</td>
    </tr>
    <tr>
      <td>some-long-url</td>
      <td>A long URL that may also break at hyphens</td>
    </tr>
  </table>
</body>

现在，我们再次在IE浏览器中打开这个HTML文件，就会看到不再发生在连字符处断行的问题。