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

Question

I have a Dialog box which displays a message to the user about deleting a file, as follows:

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

The corresponding html :

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

The file name is being appended to the tag(delete-filename) through javascript code:

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

The Problem: Whenever the filename is let's say 30chars long, the text within the p tags overlaps the dialog box and results in this :

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

My Query: How can I solve this? Is this a design flaw? I noticed that the p tag predetermines its width and height before the span tag is populated, and not after.Is this the problem here? Whats the workaround?Thanks Chris.p

Answer 1

You just need to wrap the holding box with some width.

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

Something like this you are looking? Demo: http://jsfiddle.net/AhuTz/