Wrapping Text

[ffstock]

Hello, how do I limit the amount of characters per line (wrapped the text) for the item SKU when I have the box checked"display SKU"? Currently there is no line break, so the line may be extremely long. I want to have a line break at approximately 25 characters, and wrapped it to another line.

Thank you for your help,
Allen

[loren_d_c]

Have you tried putting an HTML <br> tag wherever in the SKU that you want a line break?

-Loren

[ffstock]

What I was really looking for was some CSS, to possibly put in the appropriate place of the layout. I think there is some CSS that limits the length of each line, I have just not been able to find it. If I put a BR in the SKU, I would have to change every item.

[ShopSite Clarissa]

The only CSS I'm aware of that can accomplish this is code for padding and margins, which limits the area that the text is in:
http://www.w3schools.com/css/css_margin.asp

If you place the SKU in a different section and use margins, you can specify how much area it uses, and thus obtain a line break.

[m2]

A construct like:

Code: Select all

<div style="max-width:50px; max-height: 25px;overflow:auto;">

should force a text wrap after 50 px and display scroll bars if the text exceeds the allowed height. To prevent scroll bars use overflow:hidden.

m2

[ffstock]

I tried inserting that code in several different places with no changes. My site is www.ffstock.com

Drains > top row middle item description is from the SKU

Items to the left (7167-CP) and right (9146-CP) are taken from the description where I have HTML with a </b> breaking up the lines.

I just think instead of typing all this there would be code to limit the line break.

Allen

[m2]

I built an example page at http://www.ssdev.us/divtest.html. The text doesn't have forced line breaks. There are 3 DIVs: 300x100, 100x100 and 50x100. They each wrap at the max-wdith in FF3 and IE7.

Note that the 50x div chops the right-most character because there isn't a natural place in the text to breack before the right limit. Adjusting the div width and using a fixed-width font should prevent that.

m2