Html Question posted in
Some basic documentation can be found here.

Html – Auto adjust the font size of a container so that the text is only one line but takes up the entire container width (CSS only)

Say I have a text container, can the font auto adjust so that the text inside fits in exactly one line and takes up the entire container width without overflowing? With only CSS.

Like hypothetically if I had a and I set the font size to auto, and auto did the thing I described earlier.

Tags:

2

Answers


  1. 0

    Is the text a fixed length? If so, you could set the font size to a portion of the view width. It would take some trial-and-error to get the exact value.

    Something like this:

    a#fill-window {
    font-size: .5vw;
}

    With a dynamic text length it’s a bit more complicated; I don’t know a way to do it without using JavaScript. Perhaps a calc() function?

    Related:
    https://www.w3schools.com/cssref/css_units.php
    https://www.w3schools.com/css/css_math_functions.asp

    Login or Signup to reply.
  2. 0

    To make the text fit exactly one line and take up the entire width of a container using only CSS, use:

    .container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 5vw; /* Adjust this value as needed */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search