Div with fixed height and big text

Question

I have a div with fixed with and height and a big text. For example: http://jsfiddle.net/gEjTz/ I want to reseze text to appear in this div. How to do this? Thanks!

<div style="height: 20px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit ssssssssssssssssssssssssssssssss s</span>
</div>
$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));

    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.height() >= 20);
});

Its not 100% clear what you want, can you give an example of expected output? — SW4, May 13 '14 at 11:56
You wish to change font-size to match div width and height? or change div's sizes? — Mr.TK, May 13 '14 at 11:58
I want to fit the text in this div. For now, it appears under my div. — Tirgovatu Andreea, May 13 '14 at 12:05
I have a div with fixed height and width and inside i have a text that is changing, and sometimes it can be word or two and sometimes it can be a sentence. What i need is to shrink font size so it fit to that div. — Tirgovatu Andreea, May 13 '14 at 12:17
from a UI point of view, you would be better off allowing scroll on the div and keeping the font-size constant ... — Catalin Deaconescu, May 13 '14 at 12:20
Side note: Please be careful with code like `do { fontSize-- } while (span.height() > 20)` because in certain circumstances (particularly when text is zoomed, in zoom-text-only mode in Firefox) it can result in an endless loop (with fontSize going down from 0 towards negative infinity). I've seen it once on some webpage and it crashed my browser. — jakub.g, May 13 '14 at 14:14

score 0 · Accepted Answer · edited May 23 '17 at 11:57

don't know if you wanted to keep that span ... i set it up to work without that ... sorry if you needed it

using an idea from Check with jquery if div has overflowing elements, i've set this jsfiddle for you.

you just need to check if the element overflow is triggered, and while that happens reduce the font-size.

But for the user's sake, i would suggest you keep a constant font size and add overflow: auto; to the parent div

Daniele94 · Answer 2 · 2014-05-13T13:03:20.030

0

If you want to have fixed dimensions of the box, you cant set the font-size. If you want to set the font-size, you cant set dimensions. you need to do this:

<div style="display:inline; border: 1px solid black;">
<span style="font-size: 50px;">This is my text that I want to fit ssssssssssssssssssssssssssssssss s</span>

Watch here: JSFiddle

EDIT: JSFiddle changed

edited May 13 '14 at 13:03

answered May 13 '14 at 12:48

Daniele94

113
8

that's not fixed width and height – Catalin Deaconescu May 13 '14 at 12:59
but why you want them fixed? – Daniele94 May 13 '14 at 13:00
i don't. but she does. she said so in the comments on the question – Catalin Deaconescu May 13 '14 at 13:01

Div with fixed height and big text

2 Answers2