body {
display: flex;
align-items: center;
background-color: black;
}
h1 {
font-size: 8rem;
border: 0.1em solid white;
color: white;
text-justify: center;
font-family: "Lucida Sans Unicode", amp;amp;quot;Lucida Grande", sans-serif;
flex: 1;
display: inline-flex;
justify-content: center;
}
/* Need this:
-------------
|Hello world|
-------------
On all screen sizes, portrait or landscape orientation. */<h1>Hello World</h1>I'm struggling with adjusting the text size based on the screen width and formatting the text properly inside the box. I also want the border to only surround the text, not stretch to the width of the container as shown in this example:
If resizing the text is too complicated, then a simpler solution would be appreciated. Thank you!