CODEWITHSUNDEEP
htmlcss
sun
sun

Reputation: 1668

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

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

Upvotes: 34

Views: 180765

Answers (6)

Omar bakhsh
Omar bakhsh

Reputation: 1056

You can style it like this. It's very easy. Look how number 4 is Scrolled.

#ol_list li {
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;
}

 #ol_list li span {
    display: block;
    max-width: 370px;
    max-height: 20px;
    overflow-x: auto;
    white-space: nowrap;
 }
<ol id="ol_list">
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>scrolled ghghghfghfjhfghghhfghhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhghghghfghfjhfghghhfghhfghfghfghfghfghfghfghfhhhfghfghfghfghfghfghfghfhhh</span></li>
<li><span>text5</span></li>
</ol>

Upvotes: 0

dmc85
dmc85

Reputation: 350

Modifying the value of white-space from nowrap to normal solved my issue with fitting text to a fixed div.

Upvotes: 0

Ayush Shankar
Ayush Shankar

Reputation: 447

You can also use font sizing in units of 'vw'.

.limit {
font-size : 1.3vw;
}

Upvotes: 1

Ricardo Gon&#231;alves
Ricardo Gon&#231;alves

Reputation: 5074

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/

Upvotes: 8

Mr. Alien
Mr. Alien

Reputation: 157314

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

Upvotes: 63

Akhil
Akhil

Reputation: 967

Modified the class limit. You can show the entire text in a single line.

CSS

.limit p {
    overflow-x: scroll;
    white-space: nowrap;
    width: 50px;
}

Upvotes: 1

Related Questions