У меня есть эта страница, на которой есть таблица. Он содержит некоторую информацию, такую как имя пользователя и другую информацию. Мы разрешаем пользователям создавать имена пользователей длиной до 255 символов. Когда пользователь вводит имя пользователя, которое длиннее ширины таблицы, таблица растягивает разрушение стиля таблицы. Есть ли способ предотвратить автоматическую калибровку таблицы для соответствия всему контенту? Кроме того, есть ли способ принудительно обернуть одну строку символов? Я действительно ищу только быстрое встроенное исправление CSS для этого, я пробовал word-wrap: break-word, который не работает, также попробовал стиль = «table-layout: fixed», который не похоже, работают для калибровки. Вот HTML я работаю с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>
Это только часть вида, и это единственная часть, которая должна быть скорректирована, чтобы упаковка и НЕ быть изменен и растягивается, чтобы соответствовать длинное имя пользователя. Я попытался поставить «style = table-layout: fixed» на базовые теги таблицы, но безрезультатно.
Редактировать Я добавил весь обзор для справки о том, как выглядит страница. Кажется, что добавление того, что вы, ребята, предлагаете тому месту, о котором вы говорите, тоже ничего не делает. Я хочу использовать встроенный CSS, чтобы он не испортил стиль для остальной части таблицы. Строка имени пользователя - это ТОЛЬКО элемент, который должен иметь некоторую сортировку для разбиения слов, чтобы таблица не расширялась автоматически, чтобы соответствовать имени пользователя, которое простирается за пиксели, установленные в файле .css, который я использую.
Создано jsfiddle, чтобы сделать это более приемлемым http://jsfiddle.net/b5od73bw/1/ – jbg