如何限制宽度 <h1> - <h5> 按内容长度标记

Question

感谢您抽出宝贵时间回答我的问题。 我知道，这个问题之前已经被问过并得到了解答，但不知怎的，我不能让它看起来像预期的那样。 我将在下面向您展示我尝试过的一些事情。

我有一个带有圆形边界的div，我想显示一个标题（标准标题之一）。

这就是我所拥有的：

HTML：

<div id="selectModel" class="admin_dropdown">
   <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
   [...]
</div>

CSS：

h5.admin_caption {

        width: 300px;
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
        background: white;

    }

我不允许发布图片（<10代表），所以我希望jsfiddle工作）。

看起来如何： http ： //jsfiddle.net/vrP39/

我希望它看起来像： http ： //jsfiddle.net/vrP39/1/

如您所见，最后一个小提琴的结果是通过改变width直到它与标题匹配来实现的。 当然我想用几个不同长度的标题来使用它，所以这不是一个选项。

到目前为止我尝试过的事情：

1. 在我的标题文本周围使用<span> ，也可以设置<span>元素的样式而不是<h5>
2. display: inline-block或display: inline
3. float: left在<h5> clear:left并clear:left在以下元素中clear:left

我在stackoverflow（ 标题的宽度（H1，H2等） ）中看到了这篇文章（其中包括） ，但我尝试的任何东西似乎都没有用。

我做错了什么？ 非常感谢任何帮助，提前感谢！

Answer 1

好像您正在尝试重现<fieldset>元素。 那么为什么不使用那个元素呢？

<form>
    <fieldset>
        <legend>Wählen sie das anzuzeigende Model</legend>
        <select id="selectModelDDL" onchange="createTable(this);">
            <option value="1">1</option>
        </select>
    </fieldset>
</form>

使用<fieldset>您将在元素周围创建边框，其中<legend>是边框上的文本。
现在您可以将文本与中心对齐：

fieldset
{
    text-align: center;
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
}

的jsfiddle

Answer 2

使用您当前的代码，您可以这样做： http ： //jsfiddle.net/vrP39/6/

在h5添加<span> （用于背景颜色）

<h5 class="admin_caption"><span>Wählen sie das anzuzeigende Model</span></h5>

而对于CSS

h5.admin_caption { text-align:center; margin-top: -20px; }
h5.admin_caption span { display:inline-block; background:#fff; padding:0 5px;}

第一个位居中文本，然后我们必须添加背景以隐藏黑色边框线。

span需要设置为inline-block ，因此我们可以在左侧和右侧添加一些填充，因为如果span>元素使用默认的display:inline属性，则无法执行此操作。

Answer 3

您还可以尝试将标题包装在div中：

HTML：

<div class="container">
    <div id="selectModel" class="admin_dropdown">
        <div class="caption_wrapper">
             <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
        </div>
        <select id="selectModelDDL" onchange="createTable(this);"></select>
    </div>

CSS：

div.caption_wrapper {
    margin: 0 auto;
    text-align: center;
    height: 1px;
}
h5.admin_caption {
    background: #FFF;
    display: inline-block;
    position: relative;
    top: -20px;
    margin: 0;
}

http://jsfiddle.net/vrP39/9/

Answer 4

这是你在找什么？ http://jsfiddle.net/fatgamer85/33c4N/

 max-width: 30px;
 overflow: hidden;

我已经给出了最大宽度并隐藏了溢出以获得所需的效果。