向Kendo Grid添加新行時，文本空間不適合

Question

當我使用js（下面的部分代碼）向劍道網格添加新行時，文本不適合在行內，正如您可以看到的圖片：print-screen-kendo-grid。

我該如何解決它？

var dataSource = section.find(".k-grid").getKendoGrid().dataSource; 
dataSource.add({ 
     Description: description.val(), 
     StepTimer: timer 
    }); 

謝謝。

編輯：我添加更多信息的列

CSS規則

.recipe-steps-grid .step-description { 
    max-height: 60px; 
    overflow: hidden; 
    white-space: pre-wrap; 
    margin-top: 0; 
    margin-bottom: 0; 
    text-indent: 0; 
    text-align: left; 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    border: none; 
    background-color: inherit; 
    padding: 0; 
} 

.recipe-steps-grid .step-order-col, .recipe-steps-grid .step-description-col { 
    vertical-align: top; 
} 

.recipe-steps-grid tr.k-state-selected .step-order-col, .recipe-steps-grid tr.k-state-selected .step-description-col { 
    vertical-align: middle; 
} 

.recipe-steps-grid { 
    font-size: 13px; 
    color: #342922; 
    margin: 0 -30px; 
} 

.recipe-steps-grid .step-order-col { 
    vertical-align: top; 
    color: #9d9d9d; 
    font-size: 11px; 
} 

.recipe-steps-grid .step-order-col, 
.recipe-steps-grid .step-description-col { 
    vertical-align: top; 
} 

.recipe-steps-grid tr.k-state-selected .step-order-col, 
.recipe-steps-grid tr.k-state-selected .step-description-col { 
    vertical-align: middle; 
} 

劍道網：

@(Html.Kendo().Grid<RecipeStepsViewModel>() 
.Name(gridName) 
.HtmlAttributes(new { @class = "recipe-steps-grid" }) 
    .Columns(columns => 
    { 
     columns.Template(t => { }).ClientTemplate("#= generateHandleTemplate() #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px"); 
     columns.Template(t => { }).ClientTemplate("STEP #= StepOrder #").HtmlAttributes(new { @class = "step-order-col" }).Width("50px"); 
     columns.Bound(p => p.Description).ClientTemplate("#= generateStepDescriptionTemplate(Description) #") 
      .HtmlAttributes(new { @class = "step-description-col" }).Width("100%"); 
     columns.Bound(p => p.StepTimer).ClientTemplate("#= generateTimerTemplate(StepTimer) #").HtmlAttributes(new { @class = "right-cell" }).Width("80px"); 
     columns.Template(t => { }).ClientTemplate("#= generateDeleteTemplate(" + isLocked.ToString().ToLower() + ") #").HtmlAttributes(new { @class = "dummy-col" }).Width("30px"); 
    }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Batch(true) 
     .ServerOperation(false) 
     .Read(read => read.Action("GetRecipeSteps", "RecipeSteps", new { sectionId = Model.Item1 }).Data("getLanguage")) 
     .Create(create => create.Action("CreateRecipeStep", "RecipeSteps")) 
     .Update(update => update.Action("UpdateRecipeStep", "RecipeSteps")) 
     .Destroy(destroy => destroy.Action("DeleteRecipeStep", "RecipeSteps")) 
     .Model(model => 
     { 
      model.Id(a => a.Id); 
      model.Field(a => a.Description).Editable(true); 
      model.Field(a => a.StepTimer).Editable(true); 
     }) 
) 
    .Events(e => 
    { 
     e.Save("onStepSave"); 
     e.DataBound("onStepDatabound"); 
     e.Change("onStepRowSelection"); 
    }) 
    .Selectable(s => s.Mode(GridSelectionMode.Single)) 
    .Editable(editable => editable.Mode(GridEditMode.InCell) 
     .CreateAt(GridInsertRowPosition.Bottom)) 
      ) 

      @(Html.Kendo().Sortable() 
       .For("#" + gridName) 
       .ConnectWith(".recipe-steps-grid") 
       .Filter("table > tbody > tr:not(.k-grid-edit-row)") 
       .Handler("table > tbody .drag-handle-icon") 
       .Cursor("move") 
       .Disabled(".no-drag") 
       .HintHandler("noHint") 
       .PlaceholderHandler("placeholder") 
       .ContainerSelector(".section-container[data-type=recipe-steps]") 
       .Events(events => events.Change("onStepSort")) 
      ) 

      @{ 
       if (Model.Item3 && !Convert.ToBoolean(isLocked.ToString().ToLower())) 
       { 
        <table class="add-recipe-step"> 
         <colgroup> 
          <col class="add-colgroup" /> 
          <col class="description-colgroup" /> 
          <col class="timer-colgroup" /> 
         </colgroup> 
         <tr> 
          <td class="centered-cell"><img class="add-btn" src='@Url.Content("~/Content/Images/grey-plus-thin.png")'></td> 
          <td> 
           <input class="input-box" type="text" placeholder='@Resources.placeholderNewRecipeStep' name="description" /> 
          </td> 
          <td class="timer"> 
           @(Html.Kendo().TimePicker() 
            .Name("timer-" + guid) 
            .HtmlAttributes(new { @class = "gl-timer" }) 
            .Format("mm:ss") 
            .Interval(1) 
            .Value("00:00:00") 
            .Min("00:00:00") 
            .Max("00:59:00") 
           ) 
          </td> 
         </tr> 
        </table> 
       } 
      } 

JS：

function generateStepDescriptionTemplate(text) { 
    var bold = /\*(.*?)\*/gm; 
    var html = text.replace(bold, '<span class="emph-word">$1</span>'); 

    return "<pre class='step-description'>" + html + "</pre>"; 
} 

在劍道網格上方，有一個名爲「配方步驟節」的div類。 這個想法是爲配方添加一個步驟。配方步驟網格有5列：第一個是手柄，以便用戶可以拖動該步驟來更改其順序。第二列是配方步驟序號，然後是配方步驟描述（這是我想要增加文本空間的那個）。以下專欄是配方步驟烹飪的時間。最後一列可以選擇刪除此步驟。

劍道網格在最後還有一個工具欄，用於添加步驟描述和步驟時間（「添加配方步驟」類）的新步驟。

Answer 1

如果我理解正確的話，你要溢出包裝：破字作爲列

一般來說，你可以只插入此到您的網頁

td { 
    overflow-wrap: break-word; 
} 

和你的話將打破一度字獲取到最大寬度。它的源頭會打破任何它想要的詞。這適用於你的例子，因爲你不會在任何地方打破你的話。

溢出正常對於具有某種意義的單詞會更好。欲瞭解更多信息，你可以檢查this

Answer 2

我找到了解決方案。 問題是類之前此「預」：

return "<pre class='step-description'>" + html + "</pre>"; 

根據https://www.w3schools.com/tags/tag_pre.asp：

「標籤定義預格式文本在一個元件 文本被顯示在一個固定寬度的字體（通常速遞） ，它保留了空格和換行符。元素中的文本以固定寬度的字體顯示（通常爲Courier），並保留了空格和換行符。「

因此，當我刪除它，它停止切割劍道網格中較大的行的文本