HTML Word Wrap无法正常工作？

我有这个页面上有一个表。它包含一些信息，如用户名和其他信息。我们允许用户创建长达255个字符的用户名。当用户输入比表宽度更长的用户名时，该表将伸出破坏表的样式。有没有办法阻止表格自动调整大小以适应所有内容？另外，是否有强制包装单个字符串的方法？我真的只是寻找一个快速的内联CSS修复，我已经尝试过使用word-wrap：break-word，这是行不通的，也尝试了style =“table-layout：fixed”，它没有似乎在为大小工作。这是我与HTML Word Wrap无法正常工作？

<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 ([email protected](AccountStatusValue.InActive) && [email protected](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 ([email protected](AccountStatusValue.InActive) && [email protected](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 ([email protected](AccountStatusValue.InActive) && [email protected](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>

这是视图中的一部分工作的HTML，这是一个需要进行调整，以使包装和不能调整大小并拉伸以适应唯一的部分长用户名。我试过把“style = table-layout：fixed”放在表格的基本标签上，但没有用。

编辑我已经添加了整个视图来参考页面的外观。看起来，加入你们对你所说的地方的暗示并不会做任何事情。我想使用内联CSS，因此它不会混淆表格其余部分的样式。用户名行是唯一需要某种字词打包的项目，所以表格不会自动展开以适应用户名，该用户名将延伸到我使用的.css文件中设置的像素。

来源

2014-12-30 Skrubb

创建一个的jsfiddle以使其更可口 http://jsfiddle.net/b5od73bw/1/ – jbg

事实证明，使用字处理换行：在css文件中将单词作为独立单词将文本包装到标签中将无法工作。正确的解决方案是使用max-width：XXpx与单词换行叠加的组合：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>

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

来源

2014-12-31 19:22:54 Skrubb

为什么在使用px单元时使用宽度和最大宽度？ – jbg

我一定错过了它的宽度部分。我已经从CSS文件中删除了它。我不是它的原创者。无论哪种方式，最大宽度照顾包装问题。 – Skrubb

您需要的宽度设置为表中的TD是抱着@ model.UserName

我会做一个类，而不是内联样式。

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

创建了一个可以工作的jsfiddle。我用255 M的

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

这里是你的代码固定。 http://jsfiddle.net/b5od73bw/4/

我建议你阅读更多关于专业&造型策略的缺点。

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

杠杆的HTML CSS &关系，使您的生活更轻松和人曾经将继承你的代码。

还应考虑DRY（不要重复自己）（说起来容易做，但它可以使你的编程能力，更好地&使你的代码，以便更可口。）

来源

2014-12-30 17:30:19 jbg

这种方法的问题（尽管100％有效）的是，它消除了需要使用表和TDS一起.. td在大多数情况下应该是一个自由宽度的项目。 –

同意，由于我们对页面的其他部分不了解，所以很难知道@Skrubb是如何使用这段代码的，这可能导致我们走上完全不同的道路。他可能会试图以一种响应式的布局来完成这项工作，或者我们发现一张桌子是摆在首位的错误方式。确切地说， – jbg

。只要他知道这一点。但总的来说，我认为你是对的。 –

HTML Word Wrap无法正常工作？

回答

相关问题