Angular - 根据 div 大小调整和更改文本大小 - 无 JQuery

Question

我有一个 Angular 应用程序，我在 <div> 中显示不同的字符串，但是我希望它们与 div 的宽度相符。

1. 较短的字符串应具有较大的字体大小以填充空格，而不是简单地在字母之间添加空格。
2. 长字符串应具有较小的字体大小并且不应换行到下一行。

这是我所追求的视觉表示：

我已经看到 this link 展示了执行此类操作的不同方法，但我就是无法让它发挥作用...

忘记添加代码了。给你。

component.ts

export class FitTextComponent implements OnInit {
  line1 = 'this is text for line 1';
  line2 = 'less text';
  line3 = 'medium amount of text';
  line4 = 'this will be a really long line';

  text = [this.line1, this.line2, this.line3, this.line4];

  constructor() { }

  ngOnInit() {
  }

}

component.html

<div class="container">
  <p *ngFor="let line of text">{{line}}</p>
</div>

component.css

.container {
  width: 300px;
  background: grey;
}

Here is a stackblitz to play with

Answer 1

我会留下这个作为评论，但我显然需要 50 声望...

我建议查看Font scaling based on width of container。

他们引用了您提到的链接，但也解决了其他解决方案，例如：https://drafts.csswg.org/css-values/#viewport-relative-lengths

他们还讨论了调整大小的具体解决方案，具体取决于它是基于主体还是容器进行修改。

我想看看。希望这会有所帮助！