cannot control the width of div and how can I fix it?(html)

Question

Here is html and CSS code:

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

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

the text breaks through the width of div even though I have set

display:inline-block

Are there any methods that makes the text within the width of div?

Answer 1

Set your CSS to have word-wrap to break-word.

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

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