2011-10-07 97 views
3

我不是CSS太好所以這可能是一個愚蠢的問題,但...限制div的寬度

我有有一些JavaScript作用於它,以便當用戶鍵入到一個表單表單輸入的文本類型顯示在同一頁面上的div中。

當前div是寬度:960px。所以當我輸入表單輸入和文本出現在div中,當它達到960px,它需要一個新的線,並擰緊我的佈局。

編輯:我希望它的div是最大960px x 30px,我希望文本能夠適應,但不能讓它變大,不會溢出到一個新行,而不是使滾動條出現。如果文本仍然存在,並且只有不可見的情況纔會發生。就好像它超越了div,但看不到它。這會做

我試過在格設置最大高度和最大寬度,但沒有工作(可能是因爲JavaScript是作用於它的CSS已經被閱讀了之後?)

我也爲表單輸入設置了最大長度,但是因爲那是字符,而且一些字符比較長/在大寫字母等等......這意味着一些句子看起來很短,其他的很長,例如iiiiiiiiiiii和wwwwwwwwww(每個10個字符)

關於如何解決這個問題的任何想法?

編輯: 這裏的一些代碼 - 的HTML表單輸入

<div class="input text required"> 
    <label for="CampaignTitle">Title</label> 
    <input name="data[Campaign][title]" type="text" maxLength="76px" id="CampaignTitle" /> 
</div> 

是被更新的div:

<div id="titleBarWrap"> 
    <div id="titleBar" style="max-width:960px; max-height:76px;"></div> 
</div> 

的CSS:

#topbar{background:url(../img/green/topBg.gif) repeat-x;height:67px;clear:both;} 
#titleBarWrap{width:960px;margin:auto;font-size:32px;font-weight:bold;color:#FFF; line-height:67px;} 
#mainCampContentWrap{width:960px;margin:auto;padding:24px;background:url(../img/green/mainCampContentWrapBg.gif) repeat-y;} 

的JS:

$('#CampaignTitle').keyup(function() { 
    $('#titleBar').text(this.value); 
}); 
+0

我沒有明白了。你想限制身高嗎?如果是這樣,你將如何適應文本? – GolezTrol

+0

你有任何代碼示例?最大寬度和最大高度應該工作,除非有什麼事情正在進行包裝或溢出。 – Marcus

+0

對不起。我也想限制身高。該div是爲了成爲一個標題欄。我只希望它能夠適應div 960x30px – weeJimmy

回答

2

我想:

overflow:hidden; 

可以幫助你

+0

我想我可能會欠你一杯飲料:)謝謝你的朋友 – weeJimmy

0

如果我正確理解你,你的div正在增長的文字?在這個原因你可以使用:

overflow: auto; 

然後你的div將保持相同的大小和滾動條會出現。此外,您可以使用類似:

word-wrap: break-word; 

最後你可以有JavaScript的插入

<BR> 

當文本達到一定長度

+0

問題是,我希望它的div最大爲960px x 30px,我希望文本能夠適應這一點,但不能使它變得更大,不會溢出到新行,並且不會使滾動條出現。如果文本仍然存在,並且只有不可見的情況纔會發生。就好像它超越了div,但看不到它。那會做 – weeJimmy

+0

瞭解,下次在這個問題上說。 :) – downed