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

【问题标题】：How to apply an ellipsis to CheckBoxList control label text如何将省略号应用于 CheckBoxList 控件标签文本
【发布时间】：2016-04-13 15:20:00
【问题描述】：

我有一个 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;
}

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

【问题讨论】：

这不是 CSS 问题 - 在服务器端获取数据时执行您的逻辑，并在字符数超过 200 时应用省略号。
我想用css而不是在服务器端我已经为一个div应用了相同的css并且它工作正常。
我们能看到标签的标记吗？

标签： asp.net

【解决方案1】：

试试这个：

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

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

【讨论】：

感谢对复选框列表控件进行了一些更改。必须用 % 检查 with 属性。这个想法是在 div 中以 90% 的宽度显示列表，并且 div 溢出。

【解决方案2】：

这应该可行：

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

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

【讨论】：

感谢对复选框列表控件进行了一些更改。必须检查 % 的 with 属性。这个想法是在 div 中以 90% 的宽度显示列表，并且 div 溢出。