在Bootstrap / CSS中使用固定宽度标签进行自动换行

Question

我的表单中包含固定宽度和右对齐文本的标签：

.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;
}

问题是，当标签尺寸超过90px时，它会渲染一个字母而不是另一个字母。例如，标签＆＃39; Tx Emis。诠释。 R $＆＃39;正如这个图像渲染：

有没有办法只使用CSS来自动缩小字体大小以避免这种情况？或者如果没有，我如何强制自动换行到下一行而不是这种行为？

提前感谢！

Answer 1

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);
}