MaryBaker MaryBaker - 4 months ago 8
HTML Question

Text does not set to div's width

I have a very normal div and inside I have some text. the div is styles with

test-align:center;
and have a fixed width of 360px. The problem is when I try and enter some text without any spaces between words, the whole document would not break and commit to the div's width, it would just get out of the div's width I set it.
I know that in a real life situation no one would write a document without any spaces between words, but I just want to achieve this.

HTML

<div class="wrapper">SomeDummyTextWithNoSpaceInBetwenn</div>


CSS

width:350px;
display: block;
margin: 10px;
text-align: center;

Answer

You can style the way text wraps inside a div with CSS using word-wrap:breakword

div{ width:360px; background:#555; color:#eee }
#withWordWrap{ word-wrap:break-word }
<div id="withoutWordWrap">
  ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
<br><br>
<div id="withWordWrap">
  ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>