How to make the long text to fit inside a small div?

Question

I have the div with a specified width but the text inside it are not breaking down and fitting into the div accordingly.

This might be a wrong question. How to make it fit inside the div?

I believe its not possible for fit completely inside at least can it be fitted inside the div according to the width not height.

Css

.limit{     width:50px; } 

HTML

<div class="limit">     <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p> </div> 

JSFIDDLE

Answer 1

All you need is word-wrap: break-word;

.limit{      width:50px;      word-wrap: break-word;  }

<div class="limit">      <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p>  </div>

Demo

On the other hand, if you are not looking to break the sentence, you can also use overflow property set to auto or overflow-x: scroll; - Demo

Answer 2

If you are looking for a way to resize the div's font-size to fit the entire text without word break or scroll, you should use JavaScript to detect if the text is overflowing and adjust font-size accordly:

function fitText(outputSelector){     // max font size in pixels     const maxFontSize = 50;     // get the DOM output element by its selector     let outputDiv = document.getElementById(outputSelector);     // get element's width     let width = outputDiv.clientWidth;     // get content's width     let contentWidth = outputDiv.scrollWidth;     // get fontSize     let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);     // if content's width is bigger then elements width - overflow     if (contentWidth > width){         fontSize = Math.ceil(fontSize * width/contentWidth,10);         fontSize =  fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize - 1;         outputDiv.style.fontSize = fontSize+'px';        }else{         // content is smaller then width... let's resize in 1 px until it fits          while (contentWidth === width && fontSize < maxFontSize){             fontSize = Math.ceil(fontSize) + 1;             fontSize = fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize;             outputDiv.style.fontSize = fontSize+'px';                // update widths             width = outputDiv.clientWidth;             contentWidth = outputDiv.scrollWidth;             if (contentWidth > width){                 outputDiv.style.fontSize = fontSize-1+'px';              }         }     } } 

This code is part of a test that I have uploaded to Github https://github.com/ricardobrg/fitText/