與周圍

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以確保邊框僅包圍文本。

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. */

<h1>Hello World</h1>