Question

i got a p tag which serves as the name label for my image:

        string output = "";
        output += "<p id=\"" + container.ContainerID +"\">" + container.ContainerName + "</p>";
        return output;

and i put the background image for the label in css:

 p
 {
    background-position: center;
    text-align: center;
    background-image: url('Add_in_Images/label.png');
    background-repeat: no-repeat;
}

but i face a problem where the text length is not fit with the image, for example, if i have the name large_cabinet_1, the text will run-out from the image.
I am wondering, is there anyway i can set the background image to fit with the text length?? (stretch shorter or longer according to the text)

UPDATE
Hi, i found that it would be easier for me to just use the p tag and set some border and background color to serve as the label. since the tag with automatically expand according to the text inside, the size problem is no longer there. However, since my cupboards images might be very close (just next to) each other, i will have issues where all the label overlapped with each other. I am finding a way (both jquery n css are fine) to cut the text in the label so extra characters should be put to the next line??

Really do need help here.. appreciate any suggestion…

Answer 1

I am finding a way (both jquery n css are fine) to cut the text in the
label so extra characters should be put to the next line??

Try word-wrap: break-word.