-1

I have an Angular app and I am displaying different strings on top of one another within a <div>, however I am wanting them to be justified to the width of the div.

  1. Shorter strings should have larger font-size in order to fill the space, not simply adding white space between the letters.
  2. Long strings should have smaller font size & should not wrap onto the next line.

This is a visual representation of what I am after: enter image description here

I have seen this link showing different methods of doing something like this, but I just cannot get it to work...

Forgot to add code. Here you go.

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

physicsboy
  • 5,656
  • 17
  • 70
  • 119

1 Answers1

3

I would have left this as a comment, but I need 50 reputation apparently...

I would recommend looking at Font scaling based on width of container.

They reference the link you mentioned, but also address other solutions like: https://drafts.csswg.org/css-values/#viewport-relative-lengths

They also discuss specific solutions to adjusting the size dependent on if it is modifying based on the body or a container.

I would take a look. Hopefully that helps!

tempSeva
  • 155
  • 10
  • It seems that a lot of the answers/fiddles deal with the scaling upon changing window size, but not the extra requirement of wanting text-size being bigger to fill the width (ie: http://jsfiddle.net/0tpvccjt/1009/) – physicsboy Aug 25 '18 at 22:27
  • They mention setting font size to 100%. Doing that with their solutions should scale the text with the window size. https://jsfiddle.net/T84wL/3/ – tempSeva Aug 25 '18 at 22:30
  • This is also a good working example of what you're looking for: https://codepen.io/maciejkorsan/pen/BWLryj with a different implementation. – tempSeva Aug 25 '18 at 22:40
  • Do you know if there is a version available for Angular? – physicsboy Aug 26 '18 at 10:59
  • I believe you can use this, you just have to do an extra step. See: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af under the section "how to use a library that does not have type (.d.ts)". – tempSeva Aug 26 '18 at 22:02