“word-break”在 CSS Grid 中无法正常工作答案

【问题标题】："word-break" does not work correctly in CSS Grid“word-break”在 CSS Grid 中无法正常工作
【发布时间】：2020-07-22 09:14:24
【问题描述】：

我的 CSS 网格有问题。

在 Firefox 中，当屏幕宽度减小（例如 600 像素）时，使用 CSS Grid 的页面上的某些元素不支持word-break 值。它们与原来保持在同一条线上。

我尝试添加display: inline-block，但没有解决这个问题。

这就是错误：

* {
box-sizing: border-box;
}

body {
margin: 0 0;
padding: 0 0;
}

.grid {
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
display: grid;
margin-right: auto;
margin-left: auto;
}

.item {
grid-area: one;
display: grid;
}

<div class="grid">
  <div class="item">
    <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p>
    <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p>
  </div>
</div>

另一个例子：link

我必须或可以使用任何属性来解决这个问题吗？

【问题讨论】：

你的代码中的分词在哪里？
@Sfili_81 word-break: break-word 是默认值

标签： css firefox word-break

【解决方案1】：

您需要使用 CSS 包装您的文本。你可以在这里查看它在 w3schools 上的工作原理：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

从上面页面复制的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px; 
  border: 1px solid #000000;
}

div.a {
  word-wrap: normal;
}

div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<h2>word-wrap: normal (default):</h2>
<div class="a"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

<h2>word-wrap: break-word:</h2>
<div class="b"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

</body>
</html>

【讨论】：