文本没有在div内换行，并且换行符不起作用

Question

我有一个宽度为10%的div，但是它里面的文本没有在div中换行。我已经阅读了一些CSSword-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>

Answer 1

你需要修改一下。

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

thenwidth:10%top.

查看代码片段。

.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>