3 replies

Text that fills the width of a container

Hello,

I am trying to write some SCSS to control the size of some text.

The text needs to fill the width of the container but maintain the correct proportions on different viewports.

I thought I might be able to achieve this with a container query. Currently I have…

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

.container {
  container-type: inline-size;

  h1 {
    white-space: nowrap;
    font-size: 7.75cqi;
  }
}

This kind of works, in that if the text length doesn't change, it does scale. The problem comes with dynamic text, if there are more charters as an example, then the

h1

h1

h1

h1 will overflow the container.

Thanks in advance

Text that fills the width of a container

Similar Threads

Similar Threads

Similar Threads