Asp.net 如何对复选框列表控件标签文本应用省略号

我有一个ASP.NET CheckBoxList控件，它将从服务器端代码绑定。它在UI中的呈现非常完美，但是当任何列表项的text属性包含更多文本（比如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>

它工作正常，但复选框和文本在两行上呈现。

尝试以下操作：

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

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

这应该有效：

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

---

为避免复选框和标签在单独的行上，显示样式应设置为

内联块

，标签宽度应小于复选框列表宽度。

这不是CSS问题-在服务器端获取数据时执行逻辑，并在字符数超过200时在服务器端应用省略号。我想使用CSS而不是服务器端我已应用了同样的css用于一个div，并且工作正常。我们可以看到标签的标记吗？感谢对checkboxlist控件进行了一些更改。必须使用%检查with属性。我们的想法是使用div overflow以90%的宽度在div中显示列表。感谢您对checkboxlist控件进行了一些更改。必须使用%检查with属性。其思想是使用div溢出以90%的宽度在div中显示列表。

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