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無法正常工作？

回答

相關問題