Question

我有一个ASP.NET CheckBoxList控件，它将从服务器端代码绑定。它在UI中完美呈现，但当任何列表项的文本属性包含更多文本说200个字符时，如何将省略号应用于该标签？

我的代码：

<div style="width:300px;height:200px;overflow:auto;">
    <asp:CheckBoxList ID="chklstStates" CheckBoxes="true" Width="250px"
        RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Flow" 
        runat="server" SelectionMode="Multiple" CssClass="nowrap_list">
            <asp:ListItem Text="Alabama" Value="Alabama"></asp:ListItem>
            <asp:ListItem Text="Alaska" Value="Alaska"></asp:ListItem>
            <asp:ListItem Text="Arizona" Value="Arizona"></asp:ListItem>
            <asp:ListItem Text="Arkansas" Value="Arkansas"></asp:ListItem>
            <asp:ListItem Text="California" Value="California"></asp:ListItem>
            <asp:ListItem Text="Connecticut" Value="Connecticut"></asp:ListItem>
            <asp:ListItem Text="New YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew York" Value="New York"></asp:ListItem>
        </asp:CheckBoxList>
    <div style="text-align:right;">
        <asp:Button id="Button1" runat="server" Text="cancel" />
        <asp:Button id="Button2" runat="server" Text="submit" />
    </div>
</div>

的CSS：

.nowrap_list label
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:block;
}

它工作正常，但复选框和文字在两个不同的行上呈现。

Answer 1

试试这个：

.nowrap_list label {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

我认为您需要指定实际宽度。

Answer 2

这应该有效：

.nowrap_list label
{
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

为避免复选框和标签位于不同的行上，显示样式应设置为inline-block，标签宽度应小于CheckBoxList宽度。

如何将省略号应用于CheckBoxList控件标签文本

2 个答案: