HTML/CSS文本溢出其容器 [英] HTML/CSS Text overflowing its container

问题描述

我一直在做一个简单的页面，其中包含一个文本字段和两个选择字段，我可以在其中选择文本颜色和文本大小.我在每个div上放置了一些具有不同颜色的边框，以查看它们的放置位置.我遇到的问题是当我为文本选择更大的尺寸时，它使容器溢出，但是我希望容器随着文本的增长而增长，更清楚的是，无论文本的大小如何，我都希望文本在边框内，因此如果文本变大，边框也会变大. 我将把我的小提琴链接和css:

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. 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:

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属性，但它似乎适用于内容，而不适用于容器. 感谢您的宝贵时间！

I tried with the overflow property but it seems to work with the content and not with the container. Thanks for your time!

推荐答案

您的div的样式为"display:inline;"，将其更改为"display:inline-block;"

Your div has a style of "display: inline;", Change that to "display: inline-block;"

div
{
    display:inline;
}

更改为:

div
{
    display:inline-block;
}

这样想.内联元素并不意味着包含块元素.例如，< span> (这是一个内联元素)可以从一行的结尾到另一行的开头，因此没有明确定义的宽度或高度:

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>Hello
World </span> ..... ..... ..... ..... ..... ..... ...

但是您不想使其成为一个块(或< div>)，因为它占据了整行:

But you don't want to make it a block (or <div>) either because it takes up the whole line:

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

因此，如果您声明一个元素内联块，则可以并排放置几个块

So if you declare an element inline-block, you can have several blocks side-by-side

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

这篇关于HTML/CSS文本溢出其容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！