将文本动态附加到 <p> 元素内的 <span> 元素会破坏我的设计

Dynamically appending Text to a <span> element inside a <p> element breaks my design

本文关键字：元素 span 我的 动态 文本      更新时间：2023-09-26

>我有一个对话框，它向用户显示有关删除文件的消息，如下所示：

+-----------------------------------------------------------------------+
| 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）中：

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

问题：每当文件名长度为 30chars 时，p 标记中的文本都会与对话框重叠并导致：

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

我的查询：我该如何解决这个问题？这是设计缺陷吗？我注意到 p 标签在填充 span 标签之前而不是之后预先确定其宽度和高度。这是这里的问题吗？有什么解决方法？谢谢克里斯·

你只需要用一定的宽度包裹保持盒。

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

你在寻找这样的东西？演示：http://jsfiddle.net/AhuTz/

相关文章：