How to word wrap a table/cell in ASP?

HTML & CSS
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-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

You could apply word-wrap: break-word; to the container. It’s pretty well supported.

3

I never done this before. Anywhere I can get a example?

4

I can’t make out from your code which element is the container. If you could provide an example of the output source code taken from a browser showing the problem - or a link to a page - then it should be possible to see which element requires the word-wrap CSS.

5

I believe the code is using a LiteralControl to display a static value below.

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

But according to the following link, you can’t apply a style to the contents.
http://www.w3schools.com/aspnet/control_literal.asp

6

I’m afraid the way ASP works means nothing to me. If we can establish what the code looks like when it reaches the browser we can determine how to target the relevant HTML element with CSS in a stylesheet. To this end, the best course is either to provide a link to the page or for you to load the page (containing the long string) in a browser, view the source there, copy it and paste it here (please use the code formatting in the post editor toolbar).

Alternatively, if the text is being output in a table, you may simply be able to add a CSS rule to your stylesheet targeting all table cells:

td {
    word-wrap: break-word;
}
7

I added the following to my CSS file, and this appear to work on my DEV server, just not on my local development machine. Something going on my local machine cache. The only question I have now is that, I have of couple of areas where I don’t want it to wrap. Is it possible to not allow wrapping in certain areas of a page?

td {
word-wrap: break-word;
}

8