gpt4 book ai didi

html - 使用::before 时 Chrome 文本未换行

转载 作者:行者123 更新时间:2023-11-28 14:28:56 25 4
gpt4 key购买 nike

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

下面是一个非常简单的例子。在我工作的系统中,我无法更改 HTML,只能更改 CSS。

label 上使用 display: inline-block 修复了换行,但它使绿色框不再显示为内联(换行将对齐到绿色框而不是左侧)。我正试图找到一些方法让 Chrome 像其他浏览器一样简单地包装。

Firefox 和 IE/Edge

Firefox and IE/Edge

Chrome

enter image description here

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>

最佳答案

好吧,我混淆了浏览器。现在我确定我使用的是 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

关于html - 使用::before 时 Chrome 文本未换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54354832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com