如何將省略號應用於CheckBoxList控件標籤文本

我有一個將從服務器端代碼綁定的ASP.NET CheckBoxList控件。它完美地呈現在用戶界面中，但是當任何列表項的文本屬性包含更多文本時，都會顯示200個字符，那麼如何將省略號應用於該標籤？如何將省略號應用於CheckBoxList控件標籤文本

我的代碼：

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

它的工作確定，但複選框和文本是在兩個不同的線呈現。

來源

2016-04-13 user3625533

這不是一個CSS問題 - 讓服務器端的數據時，執行你的邏輯，當字符數超過200 – IrishChieftain

申請省略號在那裏，我想用CSS來做到這一點不是在服務器端我已經申請了相同CSS爲一個div和它的工作正常。 – user3625533

我們可以看到標籤的標記嗎？ – IrishChieftain

試試這個：

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

我認爲你需要指定的實際寬度。

來源

2016-04-13 15:35:56 IrishChieftain

感謝與checkboxlist控件的一些變化。必須檢查with屬性的％。這個想法是用div溢出顯示90％寬度的div列表。 – user3625533

這應該工作：

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

爲了避免該複選框並在不同的行的標籤，顯示風格應設置爲inline-block和標籤寬度應比的CheckBoxList寬度小。

來源

2016-04-13 15:39:03 ConnorsFan

感謝您對checkboxlist控件的更改。必須檢查with屬性的％。這個想法是用div溢出顯示90％寬度的div列表。 – user3625533

如何將省略號應用於CheckBoxList控件標籤文本

回答

相關問題