Maximize font size for PRE element to use all available horizontal space

Asked Feb 07 '17 at 17:35

Active Feb 08 '17 at 09:44

Viewed 142 times

I want to include a changing pre-formatted text into a web page and display it as big as possible.

The text is inside a PRE tag so whitespace and formatting remain intact.

What I'm currently using is this:

pre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
}

div {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

<div>
    <pre>
    the text here
       and it continues of a couple of lines
    </pre>
</div>

This works pretty well, but only if the content of the PRE tag is around 80 characters wide.

Is there a way to maximimze the font-size of the PRE element even if the content is narrower or wider? Ideally with only CSS and no JavaScript.

edited Feb 08 '17 at 09:44

John Slegers

45,213
22
199
169

asked Feb 07 '17 at 17:35

neuhaus

3,886
1
10
27

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) – Serg Chernata Feb 07 '17 at 19:15
Check out http://fittextjs.com/ for text that fills it's container. – Davey Feb 07 '17 at 20:20
Ideally I'd like a solution that is CSS only without javascript. – neuhaus Feb 08 '17 at 09:40
Well CSS doesn’t know how long the “lines” in your PRE element are. – CBroe Feb 08 '17 at 09:56

Maximize font size for PRE element to use all available horizontal space

0 Answers0