HTML/CSS 文本溢出其容器

Question

我一直在用一个文本字段和两个选择字段制作这个简单的页面，我可以在其中选择文本颜色和文本大小。我给每个 div 放了一些不同颜色的边框，看看它们放在哪里。我遇到的问题是当我为文本选择更大的尺寸并且它溢出容器时，但我希望容器随着文本的增长而增长，更清楚地说，我希望文本无论其大小如何都在边框内, 因此如果文本变大，边框也会变大。我将放置我的 fiddle 链接和 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 属性，但它似乎适用于内容而不适用于容器。感谢您的宝贵时间!

Answer 1

你的div有一个样式“display: inline;”，把它改成“display: inline-block;”

div
{
    display:inline;
}

更改为:

div
{
    display:inline-block;
}

这样想。行内元素并不意味着包含 block 元素。例如，(内联元素)可以从一行的末尾跨越到另一行的开头，因此它没有明确定义的宽度或高度:

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

但是你不想让它成为一个 block (或

)，因为它占据了整行:

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

所以如果你声明一个元素内联 block ，你可以并排放置几个 block

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

关于HTML/CSS 文本溢出其容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22024648/