GridView 長文本截斷顯示省略號：CSS text-overflow + RowDataBound 完美實現

純 CSS 方案（推薦）

<style>
.ellipsis-150 {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* 或 block */
    vertical-align: middle;
}
</style>

RowDataBound 中注入樣式

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.DataRow) return;

    // 第 5 列 (索引 4) 申請原因
    string reason = e.Row.Cells[4].Text;
    e.Row.Cells[4].Text = $"<div class='ellipsis-150' title='{HttpUtility.HtmlEncode(reason)}'>{HttpUtility.HtmlEncode(reason)}</div>";

    // 第 8 列 (索引 7) 審批備註
    string remark = e.Row.Cells[7].Text;
    e.Row.Cells[7].Text = $"<div class='ellipsis-150' title='{HttpUtility.HtmlEncode(remark)}'>{HttpUtility.HtmlEncode(remark)}</div>";

    // 行懸停/點擊樣式增強
    e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='#F4FBFF';";
    e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='';";
    e.Row.Attributes["onclick"] = "this.style.backgroundColor='#e2eaf1';";
}

關鍵點

• HtmlEncode：防止數據中包含 HTML 標籤破壞結構或導致 XSS。
• title 屬性：原生滑鼠懸停提示完整內容，無需 JS。
• display: inline-block：使 width 生效於行內元素。
• 表頭同樣處理：if (e.Row.RowType == DataControlRowType.Header) e.Row.Cells[4].CssClass = "ellipsis-150";

進階：多行省略 (WebKit/Blink)

.ellipsis-3lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 300px;
}

現代替代：TemplateField + CSS 類

<asp:TemplateField HeaderText="原因">
    <ItemTemplate>
        <div class="ellipsis-150" title='<%# HttpUtility.HtmlEncode(Eval("Reason")) %>'>
            <%# HttpUtility.HtmlEncode(Eval("Reason")) %>
        </div>
    </ItemTemplate>
</asp:TemplateField>

優勢：聲明式、無後台代碼、設計時可見、配合 EnableViewState="false" 性能更好。