Fit text to a div
I have a div with fixed height and width and inside I have text that is changing. Sometimes it can be a word or two and sometimes it can be a sentence. What I need is to shrink the font size so the text fits to that div.
6 Answers 6
i had an idea and it worked 🙂 here is my code
+1 I had problems getting the width of text that was wrapped in a div with an explicit width. I used this solution —> stackoverflow.com/a/2771544/374866
I have to say that this function is far too slow. Changing css attributes causes a redraw of the dom. If you need to adjust the size of a lot of elements or on a timer it will hog down your webpage. Check my answer for a more efficient but still simple solution
I had a similar issue, which made me write my own plugin for this. One solution is to use the shrink-to-fit-approach, as described by user54316. However if you have to fit multiple items or are concerned with performance, e.g., on window resize, have a look at jquery-quickfit.
It meassures and calculates a size invariant meassure for each letter of the text to fit and uses this to calculate the next best font-size which fits the text into the container.
The calculations are cached, which makes it very fast (there is virtually no performance hit from the 2nd resize on forward) when dealing with multiple texts or having to fit a text multiple times, like e.g., on window resize. I think it would work perfect in your case.
after you changed the text.
How do I make the text shrink automatically to fit in the div?
I know i can adjust the font size, but I want it to shrink to fit the div automatically when it is viewed on a different platform which reads font sizes differently for example. See the fiddle: http://jsfiddle.net/08pyzgx4/
Bla Bla Bla Bla Bla Bla Website: www.blabla.co.za | E-mail: info@blabla.co.za | Control Centre: 08600-22-blabla There are as many duplicates as there are ways to do this. If you want a css only solution you can use vh/vw units.
2 Answers 2
You can do it like this. and don’t forget to add js library.
this is the fiddle. http://jsfiddle.net/f6sx474j/ Try by increasing the text i checked it and its working properly.
Bla Bla Bla Bla Bla Bla Website: www.blabla.co.za | E-mail: info@blabla.co.za info@blabla.co.za info@b Control Centre: 08600-22-blabla You should set width as 100% and max-width as value (600px in you case).
This is a qucik example just to show you the right way, so now you can style it as you like.
Remember that for scaling text, the div should always have a percentage width (and off course a max-width if you need one)
Then just use a couple of media queries to adjust the text position on different resolutions and it should be ready
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
fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf
6 Answers 6
fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf
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
word-wrap is called now overflow-wrap, since according to mdn: «The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.»
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'; >> > > Squeeze text to fit in CSS
I have a «wall» of quare-sized Bootstrap button with one fontawesome icon and two lines of text ( ) below. Sometimes, the text for each line can be too long, so it wraps naturally. I want to prevent that. However, it is a requirement, that the full text must be displayed. I also don’t want to break the tile layout by enlarging single tiles. Therefore, my idea was to use a CSS transform: scaleX(?) to squeeze the text in case. But I don’t have a reference to the actual width of the text. Also, the with of the tiles is based on relative units, so I can’t use any fixed pixel values. Here’s my current css declatation:
.flex-container .btn-lg < width: 20vmin; height: 20vmin; margin: 8px; font-size: 3.5vmin; word-wrap: break-word; white-space: normal; >.btn-tile > * If the texts desc1 or desc2 are too long, a scaleX should be applied, so that they fit inside the fixed size button. Is this even possible with pure CSS, or do I need to iterate over the tiles with Javascript, read the actual widths and calculate the scaling factor like that? I’m using knockout binding, by the way. Edit: I did some experimenting, but I still can’t calculate the correct scaling factor. The correct factor should be somewhere around .3 for a longer text. It returns 0.477, though.
1 / $('.btn-tile').first().children().last()[0].scrollWidth * ($('.btn-tile')[0].offsetWidth)