2

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

+-----------------------------------------------------------------------+
| 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"));

问题：只要文件名是 30chars 长，p 标签中的文本就会与对话框重叠并导致：

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

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

4

1 回答 1

1

你只需要用一些宽度包裹住盒子。

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

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

于 2013-10-14T10:12:53.737 回答