font-size relative to input length

Question

I'm letting a user input a string and then I enter that string into some <div>.

The <div> has a - fixed length - and I want the text to always fit inside it.

Is there a way to set the font-size attribute to be relative to the input length (as opposed to the container width, which is not the case)? Hopefully with CSS only. Thanks.

I don't think this is possible with CSS only. I would be happy to be proven wrong, but you will probably need some JavaScript. — Andrew, Jun 27 '13 at 11:31
I've got it to work with js, but a CSS only way is what I truely fancy — Kreutzer, Jun 27 '13 at 11:37
you can keep the font-size whatever you want and give the parent element (div) `display: inline-block`. — Mr_Green, Jun 27 '13 at 11:39
possible duplicate of [Auto-size dynamic text to fill fixed size container](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — yoeriboven, Jun 27 '13 at 11:42

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

I don't think you can do that with only CSS. What you can do is get the length of the text, do some calculations and set the size of the text.

Update

I found this: Auto-size dynamic text to fill fixed size container

edited May 23 '17 at 12:28

Community

1
1

answered Jun 27 '13 at 11:27

yoeriboven

3,541
3
25
40

thanks @yoeriboven but the length of the `div` is fixed, and that's the point of my question. – Kreutzer Jun 27 '13 at 11:36
I'm sorry, I meant the width of the text. – yoeriboven Jun 27 '13 at 11:38

score 1 · Answer 2 · edited May 23 '17 at 11:50

You can achieve this using jQuery, I don't think CSS only is possible, checkout this fiddle

Note: This was already answered by DanielB for this question

HTML

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

CSS

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

Javascript

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

font-size relative to input length

2 Answers2