如何删除由缩小到适合元素的自动换行引起的额外空间？ [英] How to remove extra space caused by word-wrap in shrunk to fit element?

问题描述

我试图使用shrink来适应 #container 。它完美的工作，直到它包含的元素包装。这导致它扩大到180px。

I am trying to use shrink to fit on #container. It works perfectly until the elements it contains wrap. This causes it to expand to 180px.

CSS：

#screen-dimensions 
{
    width: 250px;
    height: 100px;
    background-color: yellow;
}
#container
{
    display: table;
    background-color:red;
    border: 5px solid pink;
}
#container > div
{
    display: inline-block;
    width: 160px;
    background-color: blue;
    border: 5px solid lightBlue;
}

HTML：

HTML:

<div id="screen-dimensions">
    <div id="container">
        <div>content</div>
        <div>content</div>
    </div>
</div>

我明白为什么会出现这种情况，但我无法找到任何解决方法。

I understand why this behavior occurs but I haven't been able to find any workarounds.

这个问题可以解决吗？

推荐答案

显示属性：

I achieved that by playing around with the display properties:

#container
{
    display: inline-block;
}
#container > div
{
    display: block;
}

请参阅： http://jsfiddle.net/feeela/Anc3v/

这篇关于如何删除由缩小到适合元素的自动换行引起的额外空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！