動態文本追加到<span>元素內</span> <p> <span>元素破壞了我的設計</span>

Question

我有一個對話框，向用戶顯示有關刪除文件的消息，如下所示：

+-----------------------------------------------------------------------+
| Delete File?                                                          |
|                                                                       |
| Are you sure you want to delete 'nameoffile.txt' from your storage?   |
+-----------------------------------------------------------------------+

相應的html：

 <p>Are you sure you want to delete '
 <span class = "delete-filename"></span>
 ' from your Cloud?</p>

文件名通過javascript代碼附加到標簽（刪除文件名）上：

$(".delete-filename").text(filter_name(get_name("text"));

問題：每當文件名長度為30個字符時，p標記內的文本就會與對話框重疊，結果是：

 +-----------------------------------------------------------------------+
 | Delete File?                                                          |
 |                                                                       |
 | Are you sure you want to delete ' longfilename-longfilename.txt' from your storage?   
 +-----------------------------------------------------------------------+

我的查詢：我該如何解決？ 這是設計缺陷嗎？ 我注意到p標簽在span標簽被填充之前而不是之后被預先確定其寬度和高度，這是這里的問題嗎？ 解決方法是什么？感謝Chris.p

Answer 1

您只需要用一定的寬度包裹容納盒即可。

p {
    background: #ccc;
    color: #000;
    padding: 10px;
    width: 420px;
}
span.delete-filename {
    color: red;
}

您正在尋找這樣的東西嗎？ 演示： http ： //jsfiddle.net/AhuTz/