Question

我有这个页面上有一个表格。它包含一些信息，如用户名和其他信息。我们允许人们创建最多255个字符的用户名。当用户输入的用户名长于表格宽度时，该表格会延伸掉破坏表格的样式。有没有办法阻止表自动调整大小以适应所有内容？还有，有办法强制包装单个字符串吗？我真的只是想找一个快速的内联CSS修复，我已经尝试过word-wrap：break-word，这不起作用，也尝试了style =“table-layout：fixed”，这不是似乎正在努力确定尺寸。这是我正在使用的HTML

<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>

这只是视图的一部分，它是唯一需要调整以允许换行的部分，而不是调整大小和拉伸以适应长用户名。我已经尝试将“style = table-layout：fixed”放在表格的基本标签上，但无济于事。

修改我添加了整个视图，以供参考页面的外观。似乎将你们所建议的内容添加到你所说的地方也没有做任何事情。我想使用内联CSS，因此它不会破坏表的其余部分的样式。用户名行是唯一需要打破某种类型的单词的项目，因此表格不会自动展开以适应延伸超过我使用的.css文件中设置的像素的用户名。

Answer 1

你需要在持有@ model.UserName

的表中设置宽度为td

我会使用类而不是内联样式来执行此操作。

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

创建一个有效的jsfiddle。我使用了255 M＆＃39。

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

这是您的代码已修复。 http://jsfiddle.net/b5od73bw/4/

我建议你阅读有关专业人士的更多信息。造型策略的缺点。

外部样式表的一个巨大优点是，您只需要在一个地方进行更改，并且这些更改将级联到HTML中，如果您使用内联样式，则必须进行每个更改。

利用 HTML＆amp; CSS关系让你的生活更容易，谁将继承你的代码。

同时考虑DRY（不要重复自己）（说起来容易做起来难，但它可以让你的编程能力更好，并使你的代码变得更加可口。）

Answer 2

事实证明，使用自动换行：break-word作为css文件中的独立单元来获取要包装在标记中的文本将不起作用。正确的解决方案是使用最大宽度：XXpx与word-wrap：break-word堆叠的组合。此解决方案涵盖了我测试过的每个浏览器。使用max-width强制表数据列不会自动调整大小，并且自动换行会强制将一个长字符串包装到下一行。总而言之，数据列的css如下所示：

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

在视图中：

<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>

这正是我正在寻找的解决方案。

HTML Word Wrap无法正常工作？

2 个答案: