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

Question

我有一个 ASP.NET CheckBoxList 控件，它将从服务器端代码绑定(bind)。它在 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;
}

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