css 在Firefox中带有浮动子项的容器中的break-word(不是break-all)

ibps3vxo 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(87)

一个overflow-wrap: break-word的文本与一个float元素并排在Chrome中工作得很好，但Firefox并没有像预期的那样进行分词，它没有考虑浮动元素的宽度。

来自chrome的屏幕截图（这是所需的输出）

“反建制主义”这个长词被打破了，因为它不能适应可用的空间--其他适合的词保持不变。
x1c 0d1x的数据

Firefox渲染失败截图

长字并没有像预期的那样被打断，而是被推到了黄色浮动元素下面。一些单词拆分正在进行--最后一个字母m出现在单独的一行。Firefox似乎不能完全处理自动换行+黄色浮动元素。

的

**所以问题是：**有没有办法让Firefox在不删除float元素的情况下，像Chrome一样漂亮地呈现断字？（我知道，我可能会添加更多的HTML Package 器，并使用flex或其他东西来代替-但我更喜欢保持当前的结构）

section {
  width: 400px;
  background: lightblue;
}

section h1 {
  font-size: 30px;
  font-family: Tahoma;
  overflow-wrap: break-word;
}

.yellow-box {
  width: 100px;
  height: 300px;
  float: right;
  background: yellow;
}

个字符

**PS：**我不想使用break-all，因为它会打破更多的话比必要的

但有趣的是，如果你在Firefox中使用word-break: break-all;，它可以完美地工作，并且浮动元素的宽度也被考虑在内

break-all截图

正如你所看到的，“确实”这个词也被打断了，这是不好的

的

本文中的所有截图均使用Chrome 114和FF 114*

css

来源：https://stackoverflow.com/questions/76823903/break-word-not-break-all-in-container-with-floating-child-in-firefox

2条答案

按热度按时间

flvlnr441#

由于.yellow-box是浮动的，您必须重置h1的BFC，使其不会位于浮动框下方。请参阅：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

section {
  width: 400px;
  background: lightblue;
}

section h1 {
  font-size: 30px;
  font-family: Tahoma;
  overflow-wrap: break-word;
  overflow:hidden; /* BFC */
}

.yellow-box {
  width: 100px;
  height: 300px;
  float: right;
  background: yellow;
}

个字符

赞(0）回复(0）举报 2023-08-09

velaa5lx2#

你可以使用网格代替，这样你就可以保持HTML的相同结构，只需要改变CSS。

section {
  width: 400px;
    display: grid;
    grid-template-columns: 300px 100px;
}
section div {
    align-self: start;
    background: lightblue;
}
section h1 {
  font-size: 30px;
  font-family: Tahoma;
  overflow-wrap: break-word;
    margin: 0;
}

.yellow-box {
  width: 100px;
  height: 300px;
  background: yellow;
    grid-column-start: 2;
    grid-row: 1/2
}

个字符
在yellow-box上使用grid-column-start属性允许您将其移动到第二列，而无需更改其在HTML中的位置。然后你只需要确保它停留在第一行grid-row: 1/2。你还需要使它只有div得到浅蓝色的背景，但这很容易改变。

赞(0）回复(0）举报 2023-08-09

我来回答

css 在Firefox中带有浮动子项的容器中的break-word(不是break-all)

2条答案

相关问题

热门标签

最新问答