如何創建換行符而不是文本自身？

Question

我遇到了一些不想創建換行符的文本問題：在縮小瀏覽器窗口時，它會使文本位於頂部。如何解決這個問題？

見H1和對文本的位置：

http://jsfiddle.net/wWJqm/，並嘗試調整下你的瀏覽器窗口。

HTML：

<div class="meteor"> 
    <img width="599" height="400" src="http://imageshack.com/a/img197/9543/2v8z.jpg" /> 
     <h1><a href="" title="Nulla eu purus et orci">Nulla eu purus et orci</a></h1> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 

CSS：

.meteor h1 { 
    position: absolute; 
    margin: 0; 
    top: 20px; 
    left: 30px; 
    font-size:24px; 
    line-height:1px; 
    text-align: center; 
    text-shadow: 1px 1px 0 #000; 
    padding: 2.3%; 
    background: #000; 
} 
.meteor p { 
    background: #000; 
    top: 50px; 
    left: 30px; 
    color: #fff; 
    line-height:1px; 
    margin: 0; 
    padding: 2%; 
    position: absolute; 
    text-align: center; 
    text-shadow: 1px 1px 1px #000; 
} 

Answer 1

試試這個

.meteor p { 
background: #000; 
min-height:inherit; 
max-height:auto; 

top: 50px; 
left: 30px; 
color: #fff; 

margin: 0; 
padding: 2%; 
position: absolute; 
text-align: center; 
word-wrap: break-word; 
text-shadow: 1px 1px 1px #000; 
} 

你的行高設置爲1px，它在動，但它只能向下移動一個像素是幾乎無法察覺。 擺脫行高，或改變它。添加一個單詞換行，最小/最大寬度和高度也是可選的。

Answer 2

我認爲這是行高，事實上，你的包裝似乎並不具有position:relative

JSFiddle Demo

CSS

.meteor { 
    background-color: lightgrey; 
    position: relative; 
    font-size:16px; 
} 

.meteor img { 
    max-width: 100%; 
    height:auto; 
    position: absolute; 
    top:0; 
} 

.meteor h1 { 
    position: absolute; 
    margin: 0; 
    top: 20px; 
    left: 30px; 
    line-height: 1em; 
    font-size:24px; 
    text-align: center; 
    text-shadow: 1px 1px 0 #000; 
    padding: 2.3%; 
    background: #000; 
} 
.meteor p { 
    background: #000; 
    top:100px; 
    left: 30px; 
    color: #fff; 
    line-height:1em; 
    margin: 0; 
    padding: 2%; 
    position: absolute; 
    text-align: center; 
    text-shadow: 1px 1px 1px #000; 
}