如何防止两个 div 之间的文本重叠？

Question

我有一个网格，其中一行包含：

LastName, FirstName
IDNumber

但是，有时姓氏和名字很长，因此它会在身份证号所在的第二行结束，并覆盖身份证号。

LastName,
FirstName
IDNumber

但是名字覆盖了身份证号码。

我将 ID 号设置为有一个 margin-top:12px; 来解决这个问题，但是对于没有这个问题的行，两个字段之间有很大的填充。我怎样才能最好地解决这个问题？

下面是一些代码：

@(Html.Kendo().Grid<HexaPod.Models.person>()
    .Name("PersonGrid")
    .ClientRowTemplate("<tr style='height:16px; vertical-align: central;'>" +
        "<td style=\"text-align:left;width:100% !important; \">" +
        "<div style='margin-bottom:5px; clear:both; height:11px;' class=\"type-style-value-emphasized\">#if(LastName != null){#" +
        "#=LastName#" +
        "#}#" +
        "#if(LastName != null && FirstName !=null){#" + 
        ", " +
        "#}#"+
        "#if(FirstName != null){#" +
        " #=FirstName#" +
        "#}#</div>" +
        "<div style='margin-bottom:5px;clear: both; margin-top:12px;' class='type-style-paragraph'>#=IdNumber#</div></td>" +
        "</tr>")

Answer 1

我所做的只是设置最大宽度：270px 并且有效：

max-width: 270px;display:inherit;

内部：

@(Html.Kendo().Grid<HexaPod.Models.person>()
    .Name("PersonGrid")
    .ClientRowTemplate("<tr style='height:16px; vertical-align: central;'>" +
        "<td style=\"text-align:left;width:100% !important; \">" +
        "<div style='margin-bottom:5px; clear:both; height:11px;max-width: 270px;display:inherit;' class=\"type-style-value-emphasized\">#if(LastName != null){#" +
        "#=LastName#" +
        "#}#" +
        "#if(LastName != null && FirstName !=null){#" + 
        ", " +
        "#}#"+
        "#if(FirstName != null){#" +
        " #=FirstName#" +
        "#}#</div>" +
        "<div style='margin-bottom:5px;clear: both; margin-top:12px;' class='type-style-paragraph'>#=IdNumber#</div></td>" +
        "</tr>")

如何防止两个 div 之间的文本重叠？

How can I prevent text overlap between two divs?

html

css

asp.net-mvc-4

kendo-ui

kendo-grid