將內容寬度設置爲自動等於寬度

Question

問題標題可能更清晰，但在給定一些文本的情況下，如果瀏覽器寬度允許它放在一行上，那麼我希望它居中，否則，我不會只需要一個單詞包裝到下一行，我如何確保它將行分成幾乎相等的長度？如果有一個CSS唯一途徑的是最好的，否則，我想做到這一點在角2 ...

即：

Desktop: 
[Screen Edge]...."Some interesting text is here"....[Screen Edge] 

Phone: 
[Screen Edge]....."Some interesting"......[Screen Edge] 
[Screen Edge]......."text is here"........[Screen Edge] 

NOT 
Phone: 
[Screen Edge]."Some interesting text is"..[Screen Edge] 
[Screen Edge]..........."here"............[Screen Edge] 

Answer 1

選項1：

使用flexbox：

與flex-wrap: wrap;並用div包裝您的文字，以便在您需要包裝時在您想要的位置打破。

.centered { 
 
    text-align: center; 
 
    margin: 10vh 15vw; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="centered"> 
 
    <span>Some interesting text is here&nbsp;</span><span>Some interesting text is here&nbsp;</span> 
 
</div>

選項2：

使用text-align: center;居中文本

使用margin: 5px 80px;創建基本利差

使用 非換空間，以確保您的文本不會中斷。 （或者你可以用與跨距中的文本用CSS規則設置white-space: nowrap）

.centered { 
 
    margin-top: 100px; 
 
    text-align: center; 
 
} 
 
.centered > div { 
 
    text-align: center; 
 
    margin: 10vh 15vw; 
 
}

<div class="centered"><div>Some&nbsp;interesting text&nbsp;is&nbsp;here Some&nbsp;interesting text&nbsp;is&nbsp;here</div></div>

Answer 2

在這裏，我希望它能幫助。您必須將您的容器設置爲text-align：center以居中文本。如果你想要它流暢，你可以將它的寬度設置爲100％。你也可以添加填充，所以當你切換到移動時，它不會看起來填充。

body { 
 
    text-align: center; 
 
} 
 
body > div { 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 
body > div > div { 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    padding: 40px; 
 
} 
 
.web { 
 
    width: 400px; 
 
    text-align: center; 
 
    height: 50px; 
 
} 
 
.mobile { 
 
    width: 100px; 
 
    height: 80px; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
}

<div> 
 
    <div class="web"> 
 
     <div class="container"> 
 
     <span>Some interesting text here</span> 
 
     </div> 
 
    </div> 
 

 
    <div class="mobile"> 
 
    <div class="container"> 
 
     <span>Some interesting text here</span> 
 
     </div> 
 
    </div> 
 
</div>