ASP.Net Bootstrap Alert 很長的消息

Question

我正在 ASP.Net 中開發引導警報

這是我在 ASPX 中的代碼：

  <asp:Label ID="AlertLB" runat="server"/>

這是我在 CSS 中的代碼

  <style>
    .alert {
        display: block;
        margin-bottom: 1px;
        height: 30px;
        line-height:30px;
        padding:0px 15px;
        display:inline-block
    }        
</style>

這是我的代碼背后：

private void SetAlert(string message, string typeAlert)
{
    AlertLB.Visible = true;
    AlertLB.CssClass = "alert alert-" + typeAlert;
    AlertLB.Text = message;
    AlertLB.Focus();
}

當它是一條短消息時，這可以正常工作，但是當它是一條很長的消息時，文本會超出警報：

完美的解決方案是將文本截斷為警報的寬度：

另一種解決方案是自動調整警報高度：

你可以幫幫我嗎？ 謝謝你。

Answer 1

根據引導程序，您可以添加text-truncate class 以提醒 label：

對於較長的內容，您可以添加 a.text-truncate class 以用省略號截斷文本。 需要 display: inline-block 或 display: block。

private void SetAlert(string message, string typeAlert)
{
    AlertLB.Visible = true;
    AlertLB.CssClass = "alert alert-" + typeAlert +" text-truncate";//added text-truncate
    AlertLB.Text = message;
    AlertLB.Focus();
}

Answer 2

搜索我發現以下文章幫助我找到了解決方案：

https://asp-net-example.blogspot.com/2013/11/aspnet-example-label-ellipsis.html

我添加到我的 CSS 代碼中：

<style type="text/css">
    .LabelEllipsisStyle {
        text-overflow:ellipsis;
        white-space:nowrap;
        display:block;
        overflow:hidden;
    }
</style>

我修改了后面的代碼：

private void SetAlert(string message, string typeAlert)
    {
        AlertLB.Visible = true;
        AlertLB.CssClass = "alert alert-" + typeAlert + " LabelEllipsisStyle";
        AlertLB.Text = message ;
        AlertLB.Focus();
    }

解決方案：

解決方案圖片