Javascript 基于标签宽度的可扩展消息div

在我的应用程序中，我有一个小标签区域，可以弹出显示消息。这些信息的长度不同，我希望标签在宽度和高度上占据尽可能小的空间

为所有这些标签创建一个id而不是仅仅重用CSS似乎很愚蠢。但是，我很难根据标签动态扩展/压缩宽度。有什么好办法吗？是否有一种神奇的混合最小宽度和宽度：自动使用？jquery在每个页面的开头都应该注意这一点，以使其覆盖该页面标签的宽度吗？我已经尝试了google/S.O.的许多方法，但到目前为止，没有一种方法能产生我想要的结果。每次标签宽度扩展父div时

以下是我目前的尝试：

HTML:

以下是一些我试图完成的截图：

---

---

有人知道实现这一点的最简单的方法吗？

您不需要在

绝对位置设置标签，因为父级已经设置了标签

显示：表格+
边距：自动
对您的
标签很好。使用表布局，
标签
将类似于一个框，但将根据其内容进行扩展/收缩：

您可以使用类轻松地重用它们：
例如：

和HTML

<div class="divStatus">
        <label class ="statusMsg">Loading ...</label>
</div>


加载。。。
找到了一个与@GCyrillus answer非常相似的解决方案，但对其进行了一些调整，使其以我想要的方式挂在顶部：

#statusContainer {
    margin: auto;
    padding: 10px 5px 0 5px;
    background: #EEEEEE;
    text-align: center;
    line-height: 2.5;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
    color: #8b6d80;
    font-weight: bold;
    display: table;
    white-space: nowrap;
    min-width: 120px;
    top: 0;
    z-index: 101;
}

#divStatus {
    position: absolute;
    margin: 0;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
}

谢谢你的帮助
 你甚至可能会放弃绝对定位，如果你只是尝试大小你的拳击。
.divStatus {
    position: absolute;
    margin: 0;
    padding: 10px 0 0 0;
    z-index: 1;
    left: 0;
    right: 0;
}
.statusMsg {
  display:table;
  margin:auto;
  color:gray;
  border:solid 1px;
  border-radius:0.15em;
  background:lightgray;
  padding: 2px 5px;
}

<div class="divStatus">
        <label class ="statusMsg">Loading ...</label>
</div>

#statusContainer {
    margin: auto;
    padding: 10px 5px 0 5px;
    background: #EEEEEE;
    text-align: center;
    line-height: 2.5;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
    color: #8b6d80;
    font-weight: bold;
    display: table;
    white-space: nowrap;
    min-width: 120px;
    top: 0;
    z-index: 101;
}

#divStatus {
    position: absolute;
    margin: 0;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
}