如何让文本在网格中自动中断 - CSS

在网格布局中，文本溢出可能会破坏网格的整体布局。为了避免这种情况，可以使用CSS中的一些属性来让文本在网格中自动中断。

1. 使用 word-break 属性

word-break 属性设置是否允许一个单词在行末溢出，并且如何中断单词。该属性的值有 normal、break-all、keep-all 和 break-word。其中，break-all 可以用于在单词内部自动中断。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid p {
  word-break: break-all;
}

2. 使用 overflow-wrap 属性

overflow-wrap 属性控制文本如何在容器边缘处换行，以防止溢出。该属性的值有 normal 和 break-word。其中，break-word 可以用于在单词内部自动中断。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid p {
  overflow-wrap: break-word;
}

3. 使用 hyphens 属性

hyphens 属性设置如何在单词内部添加连字符。该属性的值有 none、manual 和 auto。其中，auto 可以自动为单词添加连字符。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid p {
  hyphens: auto;
}

以上三种方法可以分别使用，也可以同时使用，以确保网格中的文本正确地自动中断。