Question

在Chrome中，当在单元格中的内容上使用::before时，我看到文本溢出而不是换行到表格单元格中。似乎::before是触发器，没有它，一切都会按预期进行包装。我在Firefox或IE / Edge中看不到这个。

下面是一个非常简化的示例。在我正在使用的系统中，我无法更改HTML，只能更改CSS。

在display: inline-block上使用label可以解决换行问题，但会使绿色框不再内联显示（换行后的行将与绿色框的右边而不是左边对齐）。我正在尝试寻找使Chrome像其他浏览器一样简单包装的方法。

Firefox和IE / Edge

Chrome

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;
}

td {
  border: 1px solid red;
}

label {
  padding-left: 1em;
  position: relative;
}

label::before {
  border: 1px solid green;
  content: "";
  height: 1em;
  width: 1em;
  top: 0;
  left: 0;
  display: block;
  position: absolute;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td><label>text A</label></td>
      <td><label>text B</label></td>
      <td><label>text C</label></td>
    </tr>
  </table>
</body>

</html>

Answer 1

好吧，我混合了浏览器。现在，我确定我使用的是与您的Chrome版本相同的Chrome：

label::after {
  content: "";
  display: block;
  height: 1em;
  position: absolute;
  z-index: -1;
  border: 1px solid green;
  width: 1em;
  top: 0;
  left: 0;
}

Same PEN updated

Answer 2

刚刚添加了display：table

编辑：更改标签：之前并添加显示：行内块

感谢Temani Afif的贡献。

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;

}

td {
  border: 1px solid red;

}

label {
  position: relative;
  display:table;
}

label::before {
  border: 1px solid green;
  content: "";
  height: 1em;
  width: 1em;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td><label>text A</label></td>
      <td><label>text B</label></td>
      <td><label>text C</label></td>
    </tr>
  </table>
</body>

</html>

Answer 3

最简单的答案主要涉及删除代码，这是我最喜欢的答案。

完全删除基本的label样式
修改:before，使其具有默认（静态）位置。由于不再绝对定位，因此我们也可以删除定位规则。
我制作了:before inline-block，以便它可以响应垂直对齐并保持label文本正确对齐。

table {
  font-size: 40px;
  width: 350px;
  border: 1px solid blue;
}

td {
  border: 1px solid red;
}

label:before {
  content: '';
  border: 1px solid green;
  height: 1em;
  width: 1em;
  display: inline-block;
  vertical-align: top;
}

<table>
  <tr>
    <td><label>text A</label></td>
    <td><label>text B</label></td>
    <td><label>text C</label></td>
  </tr>
</table>

CSS减肥

之前：22行

之后：16行

https://jsfiddle.net/tn7hbv8z/3/

Answer 4

这是Chrome中的错误，他们已修复。解决方案是使用最新版本的Chrome。

更多信息，请访问：https://bugs.chromium.org/p/chromium/issues/detail?id=925493。

使用:: before时，Chrome文字未在表格中换行

Firefox和IE / Edge

Chrome

4 个答案: