向剑道网格添加新行时文本空间不合适

Question

当我使用js(下面的部分代码)将新行添加到剑道网格时，文本不适合该行，如图所示：打印屏幕剑道网格。

我该怎么解决？

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>";
}

在剑道网格的上方，有一个名为"recipe-step section section"的div类。这个想法是在食谱中添加一个步骤。配方步骤网格有5列：第一列是句柄，用户可以拖动步骤来更改其顺序。第二列是配方步骤的订单号，然后是配方步骤描述(这是我想增加文本空间的一列)。下一列是食谱步骤烹饪所需的时间。最后一列可以选择删除此步骤。

剑道网格的末尾还有一个工具栏，用于添加带有步骤描述和步骤时间的新步骤("添加配方步骤"类)。

Answer 1

如果我理解正确，您需要溢出包装：为列中断字

一般来说，你可以把这个插入你的页面

td {
overflow-wrap: break-word;
}

一旦单词达到最大宽度，你的单词就会断开。当然，它会在任何地方破坏这个词。这适用于你的例子，因为你不会把你的话打断。

overflow normal更适用于有意义的单词。有关更多信息，您可以查看此

Answer 2

我找到了解决方案。问题是上课前的"预"：

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

根据https://www.w3schools.com/tags/tag_pre.asp:

"标记定义了预先格式化的文本。元素中的文本以固定宽度字体(通常为Courier)显示，并保留空格和换行符。元素中的文本以固定宽度字体(通常为Courier)显示，并保留空格和换行符。">

所以当我删除它时，它停止了在剑道网格中剪切较大行的文本