HTML Word Wrap is not working properly?

Question

I have this page that has a table on it. It holds some information such as username, and other info. We are allowing people to create usernames with up to 255 characters. When a user enters a username that is longer than the table is wide, the table stretches out wrecking the styling of the table. Is there a way to prevent the table from auto sizing itself to fit all content? Also, is there a way to force wrap a single string of characters? I'm really looking for just a quick inline CSS fix for this, I have tried the word-wrap: break-word, that doesn't work, also tried the style="table-layout:fixed", which doesn't seem to be working for sizing. Here is the HTML I'm working with

<div id="search_acct">
<h1 class="search-h1">@AdminResource.UserDetails @Model.FirstName @Model.LastName</h1>
@Html.Partial("Message")
<div class="adm_panel_2">
    <h4>
        @AdminResource.Birthdate</h4>
    <ul>
        <li>@Convert.ToDateTime(Model.DateOfBirth).ToShortDateString()</li>
    </ul>       
    <h4>
        @AdminResource.GlobalAddress</h4>
    <ul>
        <li>@Model.Address1</li>
        <li>@Model.Address2</li>
        <li>@Model.City, @Model.StateOrProvince</li>
        <li>@Model.PostalCode</li>
    </ul>
    <h4>
        @AdminResource.GlobalCountry</h4>
    <ul>
        <li>@Model.Country</li>
    </ul>
    <h4>
        @AdminResource.GlobalPhoneNumber</h4>
    <ul>
        <li>@Html.DisplayFor(m=>m.PhoneNumber)</li>
    </ul>
     <h4>@AdminResource.GlobalCellNumber</h4>
    <ul>
        <li>@Html.DisplayFor(m=>m.CellPhone)</li>
    </ul>
    <h4>
        @AdminResource.GlobalEmail</h4>
    <ul>
        <li>@Model.EmailAddress</li>
    </ul>
    @if (!string.IsNullOrEmpty(Model.Gender))
    {
        <h4>
            @AdminResource.GenderLabel</h4>
        <ul>
            <li>@Model.Gender</li>
        </ul>
    }
    @if (AuthorizationHelper.CheckAccess(Resources.User, Operations.ProxyInformation, Model))
    {
        @Html.Partial("Proxy", Model)
    }
</div>
<div class="adm_panel_2">
    <table cellspacing="0" cellpadding="0" border="0" class="tbl_user_data" style="table-layout:fixed">
        <thead>
            <tr>
                <th class="hdrcolor" colspan="2">
                    <h3>Account Information</h3>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.UserNumber
                </td>
                <td class="data-col">@Model.UserNumber
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.EmployeeId
                </td>
                <td class="data-col">
                    @{
                        var empId = Model.ProfileAttributes.FirstOrDefault(i => i.ProfileAttribute.Key == "EmployeeID");

                        if (empId != null)
                        {
                        @empId.Value
                        }
                        else
                        {
                            @Html.Raw("Not Assigned")
                        }

                    }
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.UserName 
                </td>
                <td class="data-col" style="word-wrap:break-word">@Model.UserName 
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.TestAccount 
                </td>
                <td class="data-col">@if (Model.TestUser)
                                     {
                                         @Html.Raw("Yes")
                                     }
                                     else
                                     {
                                         @Html.Raw("No")
                                     }
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.SendUserName:
                </td>
                <td class="data-col">
                    @if (!@Model.AccountStatus.Equals(AccountStatusValue.InActive) && !@Model.AccountStatus.Equals(AccountStatusValue.Transit))
                    {
                        using (Html.BeginForm("SendUsername", "User", new { userGuid = @Model.UserGuid }))
                        {
                        @Html.DropDownListFor(model => model.ApplicationIdentiferForUserNameResend, ApplicationsForUsernameRecovery, new { @class = "narrow" })
                            <div class="item">
                                <input type="submit" value="Send User Name" />
                            </div>
                        }                            
                    }@if ((bool)TempData["sendUsernameSuccess"])
                        {<img src="@Url.Content("~/Content/img/icon_checkmark.png")" />}
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.GlobalPassword
                </td>
                <td class="data-col">
                    @if (!@Model.AccountStatus.Equals(AccountStatusValue.InActive) && !@Model.AccountStatus.Equals(AccountStatusValue.Transit))
                    {
                        using (Html.BeginForm("ResetPassword", "User", new { userGuid = @Model.UserGuid }))
                        {
                        @Html.DropDownListFor(model => model.ApplicationIdentiferForPasswordReset, ApplicationsForPassword, new { @class = "narrow" })
                            <div class="item">
                            <input type="submit" value="Reset Password" />
                            </div>
                        }
                    }@if ((bool)TempData["ResetPasswordSuccess"])
                            {<img src="@Url.Content("~/Content/img/icon_checkmark.png")" />}
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.AccountCreationTime
                </td>
                <td class="data-col">@Model.CreateDate
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.AccountStatus
                </td>
                <td class="data-col">@Model.AccountStatus
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.RecentActivationEmailDate
                </td>
                <td class="data-col">@Model.LastActivationEmailDate.AuditDateTime @Html.ParenIfNotNull(@Model.LastActivationEmailDate.By)<br />
                    @if (!@Model.AccountStatus.Equals(AccountStatusValue.InActive) && !@Model.AccountStatus.Equals(AccountStatusValue.Active))
                    {@Html.ActionLink("Resend Activation Email", "ResendActivationEmail", new { uniqueUserId = @Model.UserGuid })
                    }@if ((bool)TempData["ResendActivationEmailSuccess"])
                     {<img src="@Url.Content("~/Content/img/icon_checkmark.png")" />}
                </td>
            </tr> 
            <tr class="even">
                <td class="label-col">
                    @AdminResource.UsernameRecoveryDate
                </td>
                <td class="data-col">
                    @Model.LastUsernameRecovery.AuditDateTime @Html.ParenIfNotNull(@Model.LastUsernameRecovery.By)
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.PasswordRecoveryDate
                </td>
                <td class="data-col">
                    @Model.LastPasswordRecovery.AuditDateTime @Html.ParenIfNotNull(Model.LastPasswordRecovery.By)
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.AccountValidationTime
                </td>
                <td class="data-col">@Model.ValidationInformationDate
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.AccountValidationStatus
                </td>
                <td class="data-col">
                    @if (String.IsNullOrEmpty(@Model.ValidationInformationDate))
                    {@Html.Raw("Not Validated")}
                    else
                    { @Html.Raw("Validated")
                    }
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.AccountValidationBy
                </td>
                <td class="data-col">
                    @if (!String.IsNullOrEmpty(@Model.ValidationInformationDate))
                    {
                        @Model.ValidationInformationValidatedBy;
                    }
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.GlobalValidationMethod
                </td>
                <td class="data-col">
                    @if (ValidationMethodsAllList != null && !String.IsNullOrEmpty(@Model.ValidationInformationDate))
                    {
                        SelectListItem validationType = ValidationMethodsAllList.FirstOrDefault(v => v.Value == Model.ValidationInformationValidationTypeID.ToString());
                        if (validationType != null)
                        {
                        @Html.Raw(validationType.Text)
                        }
                    }
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.LastLogin
                </td>
                <td class="data-col">@Model.LastLogin.AuditDateTime
                </td>
            </tr>
            <tr class="odd">
                <td class="label-col">
                    @AdminResource.LastUpdateDate
                </td>
                <td class="data-col">@Model.LastUpdateDate
                </td>
            </tr>
            <tr class="even">
                <td class="label-col">
                    @AdminResource.UserGuid
                </td>
                <td class="data-col" style="font-size: 11px">
                    @Model.UserGuid
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="clearBoth">
</div>

This is only part of the view, and it's the only part that needs to be adjusted to allow wrapping and NOT be resized and stretched to fit the long username. I have tried putting the "style=table-layout:fixed" on the base tags of the table as well, to no avail.

Edit I've added the entire view for reference on how the page looks. It seems that adding what you guys are suggesting to the place you are saying doesn't do anything either. I want to use inline CSS so it doesn't mess up the styling for the rest of the table. The username row is the ONLY item that needs to have a word breaking wrap of some sort so the table doesn't auto expand to fit a username that stretches past the pixels that are set in the .css file I use.

Answer 1

It turns out that using word-wrap: break-word as a stand alone in a css file to get text to wrap in a tag will not work. The correct solution is to use a combination of max-width: XXpx stacked with word-wrap: break-word. This solution covers every browser I've tested it in. Using the max-width forces the table data column to not resize automatically, and the word-wrap forces a single long string of characters to wrap to the next line. All in all, the css for the data column looks like:

.tbl_user_data td.data-col {
    width:220px;
    max-width: 300px;
    word-wrap:break-word;
}           

And in the view:

<tr class="odd">
    <td class="label-col">
        @AdminResource.UserName 
    </td>
    <td class="data-col">
        @Model.UserName 
    </td>
</tr>
<tr class="even">
    <td class="label-col">
        @AdminResource.TestAccount 
    </td>
    <td class="data-col">
        @if (Model.TestUser)
        {
            @Html.Raw("Yes")
        }
        else
        {
            @Html.Raw("No")
        }
    </td>
</tr>

This was exactly the solution I was looking for.

Answer 2

you would need to set a width to the td in the table that is holding @model.UserName

I would do this with a class instead of inline styles.

.usernameMaxWidth {
    word-wrap: break-word;
    width: 5em;
}

Created a jsfiddle that works. I used 255 M's

http://jsfiddle.net/48u1Ldf7/1/

Here is your code fixed. http://jsfiddle.net/b5od73bw/4/

I would recommend you read more on the pros & cons of styling strategies.

One of the huge pros for external style sheets is that you only have to make the change in one place and those changes will cascade into the HTML, if you did inline styles you would have to make each individual change.

Leverage the HTML & CSS relationship to make your life easier and whom ever will inherit your code.

Also look into DRY (Don't Repeat Yourself) (easier said than done, but it can make your programming abilities better & make your code so much more palatable.)