ASP.Net Bootstrap 提醒超长消息

Question

我正在 ASP.Net

中开发 Bootstrap 警报

这是我在 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

根据 bootstrap，您可以将 text-truncate class 添加到警报标签：

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or 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();
    }

解决方案：

Solution Image

ASP.Net Bootstrap 提醒超长消息

ASP.Net Bootstrap Alert very long message

css

c#

asp.net

twitter-bootstrap-3