How to word wrap a table/cell in ASP?

.NET
1

Hi All,

I have a Ajax application that I just took over, and one of the changes I need to make, is to prevent one of the string value from effecting the display of the page. When a user enters data longer 50chars, it will mess up my page layout because its trying to display the data on one line instead of automatically wrapping, when I build my display table in ASP. Any ideas on how I can resolve this? The following is an example of my code.

string labelTitle = “Share Folder Name:”;
string ctrlValue = “LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord”;

    TableRow r = new TableRow();
    TableCell c1 = new TableCell();
    TableCell c2 = new TableCell();
    TableCell c3 = new TableCell();

    c1.VerticalAlign = VerticalAlign.Top;
    c2.HorizontalAlign = HorizontalAlign.Left;
    c3.HorizontalAlign = HorizontalAlign.Left;

    c1.Width = new Unit(75, UnitType.Point);
    c2.Width = new Unit(200, UnitType.Point);
    c3.Width = new Unit(200, UnitType.Point);

    c2.Controls.Add(new LiteralControl(labelTitle));
    c3.Controls.Add(new LiteralControl(ctrlValue));

    r.Cells.Add(c1);
    r.Cells.Add(c2);
    r.Cells.Add(c3);

My css file has the following…
body
{
color: black;
font-family: Arial;
background-color:#006281;

}

.standardText
{
color: black;
font-family: Arial;
background-color:#006281;
font-size: 12px;
font-weight:normal;
}

#sectionCellWhite{
background-color:#ffffff;
border:solid 0px #222222;
padding-bottom:20px;
}

#sectionCellGray{
background-color:#f5f5f5;
border:solid 0px #222222;
padding-bottom:20px;
}

#wideTable
{
width: 100%;
border: solid 0px #222222;
}

#tableMargin
{
margin-left:15px;
}

.sectionTitle
{
FONT-WEIGHT: bold;
FONT-SIZE: large;
COLOR: white;
TEXT-INDENT: 10px;
PADDING-TOP: 6px;
HEIGHT: 25px;
BACKGROUND-COLOR: green;
TEXT-ALIGN: left;
FONT-VARIANT: small-caps
}

.stepCurrent
{
background-color: #e01122;

width: 15px;
border: 1px solid #e01122;
color: White;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-align: center;

}

.sectionSubtitle
{
font-weight: bold;
font-size: 1em;
text-transform: capitalize;
color: black;
font-variant: normal;
}
.itemHeader
{
font-weight: bold;
font-size: 1.3em;
color: black;
}

.itemLabel
{
font-weight: 500;
font-size: 1.0em;
color: black;
}

.emphasis
{
font-weight:normal;
font-size: 0.8em;
color:red;
font-variant:normal;
}

.note
{
font-weight:bolder;
font-size: 0.7em;
color:maroon;
font-variant:normal;
font-style:italic;
}

.formLabel
{
font-weight: 500;
font-size: 0.9em;
color: black;
}

.modalBackground {
background-color:#333333;
filter:alpha(opacity=70);
opacity:0.7px;
padding:5px;
}

.sideBar
{
color:White;
padding-bottom: 10px;

}

.footer
{
font-size:x-small;
color:GrayText;
}

.modalBackground2{
background-color:#CCCCFF;
filter:alpha(opacity=40);
opacity:0.5;
}

.ModalWindow2{
border: solid1px#c0c0c0;
background:#f0f0f0;
padding: 0px10px10px10px;
position:absolute;
top:-1000px;
}

ASP 2.0 SP2
VS 2005 Pro

2

I think you’d get a better response in the CSS forum for this question.

3

I don’t think you will be able to wordwrap I text which has no space in it. A table by default has auto wrap. So when the width is goes beyond over what you state, the text is automatically wrapped. If course it can’t be autowrapped if the text has no space in it.

4

create a CSS class as

.leftcol{
float:left;
width: 250px;
margin-bottom:10px;
word-wrap: break-word;
}

and use below lines of code to call the css class on page levele.

c3.Attributes.Add(“Class”, “leftcol”);