html - 无法控制 div 的宽度，如何解决？(html)

Question

这是 html 和 CSS 代码:

.d1 {
  display: inline-block;
  font-size: 16pt;
  width: 30px;
  border: 3px solid #73AD21;
}

<div class="d1">
  testingggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>

即使我设置了，文本还是突破了div的宽度

display:inline-block

有没有什么方法可以让文字在div的宽度之内？

Answer 1

将您的 CSS 设置为 word-wrap 到 break-word。

.d1{
display:inline-block;
font-size:16pt;
width:30px;
border: 3px solid #73AD21; 
word-wrap: break-word;
}

<div class="d1">
testingggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>