Question

I have some nested tables in a containing “column” table. The bottom table just contains a multi-line text area where the user can post comments. When the user saves the page I want to capture each separate line of comment as an element in an unordered list. Here is the HTML:

<td><strong>Key Messages:</strong><asp:Label runat="server" ID="messagesLabel"></asp:Label>
    <div id="messagesDiv" runat="server">
        <asp:TextBox runat="server" ID="MessagesTextbox" Width="100%" TextMode="MultiLine" Height="100" Columns="10"></asp:TextBox>
        <asp:Button runat="server" ID="clearMessages" Text="Clear Messages" OnClick="ClearMessages_Click" />
    </div>
</td>

My problem is that when the unordered list is posted back to the page, very long lines stretch the table beyond the desired width. I would like to have longer comments wrap at some point while still remaining just one element in the list — ie, one bullet. I have tried setting the MaxLength and Columns properties with no luck.

EDIT:

I tried the first suggestion using:

ul
{
    width: 50px;
}
li
{
    width: 50px;
}

but it had not effect on the layout. The layout did not change for any value of width.

I tried to use the second solution but I don’t have the CSS property “word-wrap” available in my editor. I am programming in Visual Web Developer Express 2010 which supports CSS 2.1 so, as far as I understand, I should be able to set this property but I can’t. I tried it anyway and it had no effect on the layout.

EDIT:

Here is how I am creating the list:

XmlDocument xdoc2 = new XmlDocument();
    xdoc2.Load(messagesFileLocation);
    XmlNodeList messagesList = xdoc2.GetElementsByTagName("message");
    if (messagesList.Count > 0)
    {
        string unorderedList = "<ul>";
        for (int i = 0; i < messagesList.Count; i++)
        {
            XmlNode node = messagesList.Item(i);
            string message = node.InnerText.ToString();
            unorderedList += "<li>" + message.ToString() + "</li>";
        }
        unorderedList += "</ul>";
        messagesDiv.InnerHtml = unorderedList;
    }

The user edits are actually saved to an XML file first and then posted back to the page.

Answer 1

Specify the width of the ul and li elements and your content should wrap. Also set the parent elements to a height:auto; so the height changes as the size of the content increases.

If you post more code, I can give you a better idea.