我的文字重叠了我的div

Question

我需要将文字换成div。但是，如果我使用flex-wrap，它不会包装文本，并且div的宽度会变大。我只是想把包装好的文字放在中心位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用word-break: break-all：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;