文本正在超出框

我試圖創建一個128 x 192 x盒子裏面有一個標題和文本。如果文本太長，我想要一個滾動條出現滾動文本，但標題不應滾動。文本正在超出框

問題是文本超出了框的邊界。

我該如何解決這個問題？

HTML：

<body> 
<h1>JavaScript sample</h1> 

<div id="square"></div> 

<div class="card-front"> 
    <div class="card-title">Hello Friends</div> 
    <img class="card-image" src="grizzly.jpg"> 
    <div class="card-text"> 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    hello friends 
    </div> 
</div>  
</body>

CSS：

.card-front { 
    width: 128px; 
    height: 192px; 
    background-color: green; 
    border: 2px inset gray; 
} 

.card-title { 
    width: 90%; 
    height: 1em; 
    background-color: white; 
    border: 0px; 
    text-align: center; 
    margin-top: 4px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.card-text { 
    width : 90%; 
    height: auto; 
    display: block; 
    margin-top: 4px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 4px; 
    overflow: auto; 
    background-color: white; 
}

這是用HTML和CSS等我可能做很多的我第一次東西錯了。任何其他意見表示讚賞。

來源

2013-01-12 Pubby

.card-text { 
    width : 90%; 
    height: 150px;//specify height 
    display: block; 
    margin-top: 4px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 4px; 
    overflow: auto; 
    background-color: white; 

}

DEMO

來源

2013-01-12 09:26:15 Sibu

這個工程，它只是覺得令人難以置信的hackish。 – Pubby

@Pubby但滾動出現你將指定高度！ – Sibu

嘗試CSS overflow財產

.card-front { 
    width: 128px; 
    height: 192px; 
    background-color: green; 
    border: 2px inset gray; 
    overflow-y:scroll; 
}

Jsfiddle

編輯

.card-text { 
    width : 90%; 
    overflow-y:scroll; 

    display: block; 
    margin-top: 4px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 4px; 
height:150px; 

background-color: white; 
}

Jsfiddle

來源

2013-01-12 09:24:32

問題在於它也滾動標題。我只想要「卡片文本」滾動，但「溢出」在那裏不起作用。 – Pubby

嘗試

overflow:scroll;

這會給你一個滾動條，當文本溢出。

來源

2013-01-12 09:25:10 yarakyo

你必須定義高度和卡添加文本溢出。

.card-text { 
width : 90%; 
height: 155px; 
display: block; 
margin-top: 4px; 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 4px; 
background-color: white; 
overflow:scroll; 
}

來源

2013-01-12 09:28:12 alesko007

文本正在超出框

回答

相關問題