[英]HTML/CSS Text overflowing its container
I've been doing this simple page with a text field and two select fields, where I can choose a text color and a text size. 我一直在做一个带有文本字段和两个选择字段的简单页面,我可以在其中选择文本颜色和文本大小。 I put some borders with diferent colors to each div to see where are they placed.
我在每个div上放置了一些颜色不同的边框,以查看它们的放置位置。 The issue I'm having is when I select a bigger size for the text and it overflows the container, but I want the container to grow as the text grows, more clearly, I want the text to be inside the border no matter its size, so the border will get bigger if the text gets bigger.
我遇到的问题是,当我为文本选择更大的尺寸时,它使容器溢出,但是我希望容器随着文本的增长而增长,更清楚的是,无论文本的大小如何,我都希望文本在边框内,因此如果文本变大,边框也会变大。 I'll put my fiddle link and the css:
我把我的小提琴链接和CSS:
http://jsfiddle.net/jdelva/CCLJ4/2/ http://jsfiddle.net/jdelva/CCLJ4/2/
css: 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;
}
I tried with the overflow property but it seems to work with the content and not with the container. 我尝试使用overflow属性,但它似乎适用于内容,而不适用于容器。 Thanks for your time!
谢谢你的时间!
Your div has a style of "display: inline;", Change that to "display: inline-block;" 您的div的样式为“ display:inline;”,将其更改为“ display:inline-block;”。
div
{
display:inline;
}
change to: 改成:
div
{
display:inline-block;
}
Think of it this way. 这样想吧。 Inline elements aren't meant to contain block elements.
内联元素并不意味着包含块元素。 For instance, a <span> (which is an inline element) can span from the end of one line to the beginning of the other, so it has no well defined width or height:
例如,<span>(这是一个内联元素)可以从一行的结尾到另一行的开头,因此没有明确定义的宽度或高度:
..... ..... ..... ..... ..... ..... ..... <span>Hello
World </span> ..... ..... ..... ..... ..... ..... ...
But you don't want to make it a block (or <div>) either because it takes up the whole line: 但您也不想使其成为一个块(或<div>),因为它占用了整行:
<div>Hello ..... ..... ..... ..... ..... ..... </div>
<div>World ..... ..... ..... ..... ..... ..... </div>
So if you declare an element inline-block, you can have several blocks side-by-side 因此,如果您声明一个元素inline-block,则可以并排放置几个块
<div class="ib">Hello</div><div class="ib">World</div>
When you change a div's display property to inline
, you lose the ability to control the height of that container because it is no longer a block element. 当您将div的display属性更改为
inline
,您将无法控制该容器的高度,因为它不再是block元素。 Using inline-block
will fix it. 使用
inline-block
将修复它。
div
{
display:inline-block;
}
div.subject {
border: thin solid #008000;
}
Cheers! 干杯!
Add this to all elements surrounding the inputs: 将其添加到输入周围的所有元素中:
display: block;
height: 100%;
I tried it out, it works great. 我试用了,效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.