CheckBoxListコントロールのラベルテキストに省略記号を適用する方法

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

それはOK取り組んでいるが、チェックボックスとテキストは、2本の異なるライン上でレンダリングされています。

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の幅よりも小さくなければなりません。