0

I have a form with labels in fixed width and right text-align :

.form-horizontal label {
    clear: right;
    float: left;
    font-size : 11px;
    margin: 7px;
    padding: 5px 5px 0 0;
    text-align: right;
    word-wrap:break-word;
    width: 90px;
}

The problem is, when the label size exceeds 90px, it's rendering one letter over another. For instance, the label 'Tx Emis. Int. R$' is rendering like this image :

enter image description here

Is there a way using only CSS to reduce the font size automatically to avoid this ? Or if not, how can i force word-wrap to next line instead of this behaviour ?

Thank in advance !

delphirules
  • 6,443
  • 17
  • 59
  • 108

1 Answers1

0

Responsive Font Size

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}
Community
  • 1
  • 1
HudsonPH
  • 1,838
  • 2
  • 22
  • 38