角度-根据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

他们还讨论了根据尺寸是基于主体还是容器来调整尺寸的具体解决方案。

我来看一下。希望有帮助！