如何防止兩個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之間的文本重疊？

回答

相關問題