带有边框环绕的中心文本框

Question

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", "Lucida Grande", sans-serif;
  flex: 1;
  display: inline-flex;
  justify-content: center;
}

/* Want this:

     -------------
     |Hello world|
     -------------

On all screens big and small, portrait or landscape. */

<h1>Hello World</h1>

我想我需要根据屏幕的宽度来改变文字大小，我不知道如何证明框内的文字是正确的。此外，我会将边框放在文本周围，而不是像我们看到的那样拥抱可用宽度：https://s-ckwvolnvzl.now.sh/

寻找一个最小的解决方案，所以如果文本调整太难，请忘记它。谢谢！

Answer 1

您可以使用viewport个单位来调整文字大小。

我已将justify-content属性添加到正文以使文本居中，并将h1更改为display: inline-block以确保边框仅围绕文字。

＆＃13;

＆＃13;

body {
  display: flex;
  align-items: center;
  background-color: black;
  justify-content: center;
}

h1 {
  font-size: 15vw; /* change this value as you need */
  border: 0.1em solid white;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  display: inline-block;
}


/* Want this:

     -------------
     |Hello world|
     -------------

On all screens big and small, portrait or landscape. */

＆＃13;

<h1>Hello World</h1>

＆＃13;

＆＃13;

＆＃13;