向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），并保留了空格和换行符。“

因此，当我删除它，它停止切割剑道网格中较大的行的文本