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

我有一个网格和哪一行包含：如何防止两个div之间的文本重叠？

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

来源

2015-01-15 Kala J

你可以设置一个填充LastName/FirstName元素，以便容器根据内容进行尺寸调整。你有一个设定的宽度或最大宽度？您可以将名称设置为white-space：nowrap;所以它们不会换行到第二行，但这取决于您拥有多少宽度。 – 2015-01-15 16:05:45

@JustinBreiland，我可以做白色空间nowrap，但我有我的网格设置宽度。为了让它们合适，我需要添加一个水平滚动条。有没有一种方法可以在不添加水平滚动条的情况下做到这一点？ – 2015-01-15 16:19:04

如果显示整个名称不是非常重要，可以截断它。这将显示在一行上，但会隐藏超出宽度的部分名称。另外，您可以在标题中包含名称，以便人们可以将它悬停在标题上并仍然可以获得全名。 – 2015-01-15 16:43:48

我所做的只是设置最大宽度：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>")

来源

2015-01-21 20:14:09

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

回答

相关问题