重新調整Web瀏覽器HTML |時，文本會被壓扁CSS

我的網站上的文字在瀏覽器窗口較小時不會重新調整大小。它壓縮中間的文字並製作更多的線條。這裏是我的代碼重新調整Web瀏覽器HTML |時，文本會被壓扁CSS

我的整個文件

HTML：http://pastebin.com/kj1jvTjv CSS：http://pastebin.com/A1CP7Viq

HTML：

</div> 
<div id="NewsPosts"> 
<p>Toontown Classic is coming soon</p> 
</div>

CSS：

#NewsPosts{ 
position: relative; 
bottom: 0px; 
top: -925px; 
width: 45%; 
position: center; 
margin: 0 auto; 
font-size: 20px; 
margin-left: 10; 
margin-right: 10; 
text-indent: 5; 
}

來源

2014-11-08 Jay Bot

你能澄清這一點：「文字......將不能正確調整......」你想要的字體大小減少？ – 2014-11-08 05:02:14

center對於position不是有效值，所以您不能做position: center;。如果要將窗口居中放置在一個窗口中，可以將margin-left和margin-right屬性設置爲auto。我看到你使用margin: 0 auto;這一行來做到這一點，但是之後你用margin-left: 10; margin-right: 10;覆蓋了這兩行。 10對於margin也不是有效值，它需要是10px或10em或某個值與後面的說明符。同樣對於這樣的情況，position: relative是不必要的，雖然取決於你的其他HTML元素，這可能會破壞一些東西。所以，使用這個CSS：

#NewsPosts { 
    margin-left: auto; 
    margin-right: auto; 
    padding: 10px 15px; 
    font-size: 20px; 
    width: 45%; 
}

這樣的事情應該做你想做的。

來源

2014-11-08 04:23:59 GravityScore

由於某種原因，我的文字現在沒有顯示 – 2014-11-08 04:27:48

您可以發佈您的整個HTML和CSS文檔嗎？ – GravityScore 2014-11-08 04:30:04

將它貼在pastebin上 – 2014-11-08 04:38:29

我無法確切地告訴您如何從您的問題中解決問題。如果您希望font-size根據瀏覽器的視圖大小動態更改，則可以使用vw單位（請參閱下面的jsfiddle預覽和代碼示例）。

試試這個：http://jsfiddle.net/km1hbpzv/1/嘗試調整瀏覽器的大小，看看這是否是你想要的效果。

我使用了在Pastebin上發佈的HTML和CSS，但是我在原始帖子的CSS中添加並編輯了它。

我的變化：使後來的造型變化比較難實現，但是這似乎在基於我從您的文章收集信息的時刻工作與你的HTML

#NewsPosts { 
    position: relative; 
    bottom: 0px; 
    top: -925px; 
    width: 45%; 
    //position: center; changed this to text-align: center (below) 
    text-align: center; 
    margin: 0 auto; 
    //font-size: 20px; changed this to 2vw which is percentage of the viewport width 
    font-size: 2vw; 
    margin-left: 10; 
    margin-right: 10; 
    text-indent: 5; 
} 

#DateAndBy { 
    position: relative; 
    bottom: 0px; 
    top: -930px; 
    //font-size: 30px; changed this to 3vw which is a percentage of viewport width 
    font-size: 3vw; 
    margin-left: 10; 
    margin-right: 10; 
    text-indent: 5; 
}

有可能是結構性的問題。

相關vw單位和其他font-size實踐的進一步討論可以在這裏找到：Pure CSS to make font-size responsive based on dynamic amount of characters

來源

2014-11-08 05:55:59

重新調整Web瀏覽器HTML |時，文本會被壓扁CSS

回答

相關問題