0

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.

John Slegers
  • 41,615
  • 22
  • 193
  • 161
neuhaus
  • 3,588
  • 1
  • 9
  • 24

0 Answers0