HTML/CSS文本溢出其容器

我一直在做這個簡單的頁面，有一個文本字段和兩個選擇字段，我可以在其中選擇文本顏色和文本大小。我爲每個div放置了不同顏色的邊框，以查看它們放置的位置。我遇到的問題是當我爲文本選擇更大的尺寸並溢出容器時，但我希望容器隨着文本的增長而增長，更清楚地說，我希望文本位於邊界內部，而不管其大小，如果文字變大，邊框會變大。我會把我的小提琴鏈接和CSS：HTML/CSS文本溢出其容器

http://jsfiddle.net/jdelva/CCLJ4/2/

CSS：

div { 
    display:inline; 
} 

div.main { 
    border-style:solid; 
    border-width:thin; 
    border-color:blue; 
    margin-left:60px; 
} 

div.subject { 
    width:3cm; 
    border-style:solid; 
    border-width:thin; 
    border-color:green; 
} 

#control { 
    border-style:solid; 
    border-width:thin; 
    border-color:red; 
    margin-right:60px; 
}

我試圖與overflow屬性，但它似乎與內容，而不是與容器的工作。感謝您的時間！

來源

2014-02-25 dlvx

你能解釋一下你的意思嗎？「爲文本選擇更大的尺寸」？我已經提到了字體大小，並沒有看到任何溢出，你可以看到這裏：http://jsfiddle.net/CCLJ4/3/ – mcabrams

您的div的風格爲「display：inline;」，將其更改爲「display：inline-block;」

div 
{ 
    display:inline; 
}

變化：

div 
{ 
    display:inline-block; 
}

認爲它這樣。內聯元素並不意味着包含塊元素。例如，<跨度>（這是一個內聯元件）可以從一行到另一的開始的端部跨越，因此它沒有明確定義的寬度或高度：

..... ..... ..... ..... ..... ..... ..... <span>Hello 
World </span> ..... ..... ..... ..... ..... ..... ...

但是你不不想讓它框（或<DIV>），可能是因爲它佔據了整個行：

<div>Hello ..... ..... ..... ..... ..... ..... </div> 
<div>World ..... ..... ..... ..... ..... ..... </div>

所以，如果你聲明的元素inline-block的，你可以有幾個塊並排側

<div class="ib">Hello</div><div class="ib">World</div>

來源

2014-02-25 19:56:42 wizulus

刪除'寬度：3釐米;'將允許div展開寬度也是如此。 – Howli

@alancnet這個改變是什麼？你能否解釋一下'inline'和'inline-block'之間的區別，以便使它成爲更好的參考答案。 – TylerH

@TylerH根據您的請求修改了我的回覆。謝謝！ – wizulus

當您將div的顯示屬性更改爲inline時，您將失去控制該容器高度的能力，因爲它不再是塊元素。使用inline-block將解決它。

div 
{ 
    display:inline-block; 
} 

div.subject { 
    border: thin solid #008000; 

}

乾杯！

來源

2014-02-25 20:00:14 gerald

一下添加到周圍的輸入的所有元素：

display: block; 
height: 100%;

我嘗試過了，它的偉大工程。

來源

2014-02-27 19:25:34 Ood

HTML/CSS文本溢出其容器

回答

相關問題