如何限制寬度 <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;

我已經給出了最大寬度並隱藏了溢出以獲得所需的效果。