CheckBoxList denetim etiketine bir elips nasıl uygulanır

Question

Sunucu tarafı kodundan bağlanacak bir ASP.NET CheckBoxList denetimi var. Kullanıcı arayüzünde mükemmel bir şekilde görüntüleniyor, ancak liste öğelerinin herhangi birinin metin özelliği daha fazla metin içeriyorsa 200 karakterden bahsediyor ve daha sonra bir elipsin bu etikete nasıl uygulanacağı anlatılıyor?

Kodum:

<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; 
} 

Tamam çalışıyor ama onay kutusu ve metin iki farklı hat üzerinde oluşturulur.

Answer 1

bu deneyin:

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

Sana gerçek genişlik belirtmek gerek.

Answer 2

Bu çalışması gerekir:

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

CheckBoxList genişliğinden daha küçük olmalıdır onay kutusunu ve ayrı satırlarda etiketi, görüntüleme stili inline-block ayarlanmalıdır ve etiket genişliğine sahip kaçının.