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

Question

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

LastName, FirstName
IDNumber 

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

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

我所做的只是设置 Max-Width: 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>")