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

I have a grid and which row contains:

我有一个网格,哪一行包含:

LastName, FirstName
IDNumber 

However, sometimes the last name and first name are long so it ends up on the second line where the ID number is and it covers the ID number.

但是,有时姓氏和名字很长,所以它最终会出现在ID号所在的第二行,并且它覆盖了ID号。

LastName,
FirstName
IDNumber 

But First Name covers ID Number.

但名字涵盖身份证号码。

I set ID Number to have a margin-top:12px; to fix the issue but for rows that don't have that problem there is big padding between the two fields. How can I best fix this?

我设置身份证号码有一个保证金最高点:12px;解决问题,但对于没有该问题的行,两个字段之间存在大填充。我该如何最好地解决这个问题?

Here's some of the code:

这是一些代码:

@(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>")

1 个解决方案

#1

All I did was set Max-Width: 270px and it worked:

我所做的只是设置Max-Width:270px并且它有效:

max-width: 270px;display:inherit;

inside:

@(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>")