根据内容填充设置边框

Question

据我所知，填充是边框和内容之间的空间。我尝试使用填充，但不是缩小到内容的边框，内容将被推送到新的行。

我想要的是要保留的内容，但内容的边框自动缩放/自动尺寸。如果可能的话，如果内容被调整大小（假设不同的reso或浏览器窗口变小），边框也会跟随内容，但仍然保持填充值（在我的情况下，10px）

自昨天以来一直在玩保证金和填充，但仍然不知道如何做到这一点。 伙计们，真的很感激任何帮助。

td;博士：如何将边框自动调整大小/自动缩放到内容。

HTML：

<div id="container">

    <div id="eachitem">

    </div>
</div>

的CSS：

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
}

容器用于根据保证金将整个内容定位到位置。 每个项目都是基于列表的单个项目。这就是我希望边框自动调整/自动调整到项目的位置。

由于不同的内容有不同的长度。我希望它缩小到最大内容，如下图所示：

Answer 1

<强> Click Demo

   #eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    float:left;
     width:250px;
}

Answer 2

尝试使用自动换行属性。

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    word-wrap: break-word;
}

Here is an example与您的代码。

在您编辑问题后，我发现您希望边框完全适合内容？好吧，试试吧。

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    display: inline-block;
    word-wrap: break-word;
}

Here is an example

Answer 3

由于文本的不可预测性，基于内容大小调整填充，边距和边框权重在任何语言中都是令人讨厌的。内容长度，字体粗细和大小，显示分辨率和窗口大小都会以无数种方式影响文本。此外，大多数高级语言（如JS）都无法计算文本维度，而无需先实际渲染。这意味着您必须首先显示文本，然后计算它占用的空间，然后旋转周围的属性。根据可用的API，您甚至可能无法预测要使用的值。在这种情况下，您必须迭代多个值，查看它的外观，如果它不正确，请再次执行所有步骤。不是一个有趣的努力进入。