文本不包含在 div 中，并且分词不起作用答案

【问题标题】：Text doesnt wrap inside div and word-break is not working文本不包含在 div 中，并且分词不起作用
【发布时间】：2023-10-23 07:14:01
【问题描述】：

我有一个宽度为 10% 的 div，但其中的文本不会在 div 中换行。我已经阅读了一些使用 CSS word-break: break-all; 或 word-wrap:break-word; 的解决方案。

但不幸的是，它似乎不起作用。

.card {
  display: inline-block;
  width: auto;
  height: 75vh;
  margin-right: 20px;
  margin-top: 12.5vh;
}

.one {
  width: 20vw;
  word-break: break-all;
  background: red;
}

<div class="card one">
  <p> a lot of text </p>
</div>

【问题讨论】：

按预期工作。

标签： html css word-wrap word-break

【解决方案1】：

您需要在此处进行一些更正。

您需要将width: 20vw和background-color提供给卡片。

然后width:10% 到p。

查看 sn-p。

.card {
  display: inline-block;
  width: auto;
  height: 75vh;
  margin-right: 20px;
  margin-top: 12.5vh;
  width: 20vw;
  background: red;
}

p {
  width: 10%; 
  word-break: break-all;

}

<div class="card one">
  <p> a lot of text</p>
</div>

【讨论】：