如何在父元素內保留附加元素？

Question

請重新大小輸出的寬度，看看這個演示：

cite{ 
 
    position: absolute; 
 
    display:block; 
 
    font-style: normal; 
 
    margin-left: 10px; 
 
    width: 30%; 
 
    border:2px solid; 
 
} 
 

 
span{ 
 
    padding: 0px 15px; 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<cite> 
 
    <span>one</span> 
 
    <span>two</span> 
 
    <span>tjree</span> 
 
    <span>four</span> 
 
</cite>

一切都很好。現在，當我使用JS附加這些<span>元素時，<cite>的邊界失敗。看看這個：

$("cite").html("<span>one</span><span>two</span><span>tjree</span><span>four</span>");

cite{ 
 
    position: absolute; 
 
    display:block; 
 
    font-style: normal; 
 
    margin-left: 10px; 
 
    width: 30%; 
 
    border:2px solid; 
 
} 
 

 
span{ 
 
    padding: 0px 15px; 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<cite></cite>

正如我所說的，我要永遠保持這些<span>內的<cite>（改變citeheight當有溢出）。我怎樣才能做到這一點？

---

注：這兩個屬性是至關重要的，我不能刪除/修改它們：

position: absolute; 
    display:block; 

Answer 1

您可以添加display: inline-block到spanFiddle

$("cite").html("<span>one</span><span>two</span><span>tjree</span><span>four</span>");

cite{ 
 
    position: absolute; 
 
    display: block; 
 
    font-style: normal; 
 
    margin-left: 10px; 
 
    width: 30%; 
 
    border: 2px solid; 
 
} 
 

 
span{ 
 
    padding: 0px 15px; 
 
    border: 1px solid gray; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<cite></cite>