html - 我的文字与我的 div 重叠

Question

我需要将文本包装在 div 中。但是如果我使用 flex-wrap，它不会换行文本并且 div 的宽度会变大。我只想让换行的文字居中。

.flex-container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

<div class="flex-container">
  <span>longlonglonglonglonglonglong</span>
</div>

Answer 1

你可以使用word-break: break-all:

.flex-container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  word-break: break-all;
}

<div class="flex-container">
  <span>longlonglonglonglonglonglong</span>
</div>