如何在最小化瀏覽器選項卡時保持文本仍然保持不變？

我試着創建一個文本容器。但是，當我最小化我的瀏覽器選項卡時，我的文本不斷擠壓。即使最小化，我如何使文本保持不變？如何在最小化瀏覽器選項卡時保持文本仍然保持不變？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Savana - About</title> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    body { 
 
     font-family: 'Open sans', sans-serif; 
 
    } 
 
    .container-a { 
 
     width: 100%; 
 
     height: 400px; 
 
     background-color: #ffd800; 
 
    } 
 
    .container-a h1 { 
 
     margin: 0; 
 
     text-align: center; 
 
     position: relative; 
 
     top: 100px; 
 
    } 
 
    </style> 
 

 
    <body> 
 
    <div class="container-a"> 
 
     <h1> 
 
      impeccable craftsmanship<br /> 
 
      ridiculously comfy shoes<br /> transformative impact 
 
     </h1> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2016-05-31 J. Koh

您的意思是說，當您調整屏幕大小時，在相同的行中保留相同的單詞嗎？ –

它適用於所有尺寸，你想要什麼？ – Bharat

是的，這就是@ Error404 –

容器被重新調整大小爲您調整窗口。您可以通過幾種方法來防止這種情況，例如爲容器添加最小寬度，以便在達到特定大小時不會再變小。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Savana - About</title> 
 
    <meta charset="utf-8" /> 
 
    <style> 
 
    body { 
 
     font-family: 'Open sans', sans-serif; 
 
    } 
 
    .container-a { 
 
     width: 100%; 
 
     height: 400px; 
 
     background-color: #ffd800; 
 
     /* Added min width for your container here */ 
 
     min-width: 950px; 
 
    } 
 
    .container-a h1 { 
 
     margin: 0; 
 
     text-align: center; 
 
     position: relative; 
 
     top: 100px; 
 
    } 
 
    </style> 
 

 
    <body> 
 
    <div class="container-a"> 
 
     <h1> 
 
      impeccable craftsmanship<br /> 
 
      ridiculously comfy shoes<br /> transformative impact 
 
     </h1> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2016-05-31 13:21:19 Greg2518

是的，我把我的身體選擇器，讓我沒有必要鍵入每個容器的最小寬度。 –

你可以不喜歡這些，這是正確的方式。

<div class="container-a" style=" resize: none;"> 
    <h1> 
     impeccable craftsmanship<br /> 
     ridiculously comfy shoes<br /> transformative impact 
    </h1> 
</div>

來源

2016-05-31 13:22:24 Bharat

如何在最小化瀏覽器選項卡時保持文本仍然保持不變？

回答

相關問題