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

【问题标题】：How can I prevent text overlap between two divs?如何防止两个 div 之间的文本重叠？
【发布时间】：2015-01-15 15:33:08
【问题描述】：

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

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

【问题讨论】：

您可以在 LastName/FirstName 元素上设置填充，以便容器根据内容调整大小。你有设置宽度还是最大宽度？您可以将名称设置为空格：nowrap;所以它们不会换到第二行，但这取决于你有多少宽度。
@JustinBreiland，我可以做空白 nowrap，但我为我的网格设置了宽度。为了让它们适合，我需要添加一个水平滚动条。有没有办法在不添加水平滚动条的情况下做到这一点？
如果显示全名不是很重要，您可以截断它。这会将其显示在一行上，但会隐藏超出宽度的部分名称。此外，您可以在标题中包含名称，这样人们就可以将鼠标悬停在它上面并仍然可以看到整个名称。
好主意。我做到了，我只有一个问题。如何调整悬停标签宽度以调整到我截断的文本？
悬停时是否被截断？

标签： html css asp.net-mvc-4 kendo-ui kendo-grid

【解决方案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>")

【讨论】：