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文本溢出其容器

回答

相关问题