CODEWITHSUNDEEP
jquerycssasp.net-mvc
shennyL
shennyL

Reputation: 2794

jquery- Cut string at a specific length and bring characters left to the next line

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...

Upvotes: 4

Views: 685

Answers (3)

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 2

Marcus Olsson
Marcus Olsson

Reputation: 2527

You could use the "background-size" property.

jsFiddle: http://jsfiddle.net/2w4BP/

However, please note that the background-size propert isn't supported in all browsers, and that it sometimes looks rather wonky in browsers like Opera (that is supposed to support it).

Upvotes: 0

oezi
oezi

Reputation: 51797

the answer is simple: in css, you can't stretch background-images. you'll have to find a diferent solution, but it's hard to say wich is the best without seeing the image. if it's something button-like, you could take a look at sliding doors css.

alternatively, you could embed the image as <img>-tag and use javascript to move and stretch it to the same position and dimensions like the label. with a lower z-index on the image than on the label, this would "look like" a background-image.

Upvotes: 0

Related Questions