SQL Server 字串截取顯示省略號：SUBSTRING + CASE 實現 GridView 長文字優雅截斷

需求：GridView 顯示長文字導致版面破版，需截取前 N 字元並加省略號

直接在 SQL 層處理，減少前端邏輯與資料傳輸量。

核心語法：SUBSTRING + 條件判斷

-- 基本截取：從第 1 字元取 20 碼
SELECT SUBSTRING(LongColumn, 1, 20) AS ShortColumn FROM MyTable;

進階：超過長度才加省略號，否則原樣顯示

SELECT 
    CASE 
        WHEN LEN(LongColumn) > 20 
        THEN SUBSTRING(LongColumn, 1, 20) + '...'
        ELSE LongColumn
    END AS DisplayColumn
FROM MyTable;

參數化版本（適用預存程序/動態 SQL）

CREATE PROCEDURE dbo.usp_GetTruncatedText
    @ColumnName SYSNAME,
    @TableName  SYSNAME,
    @MaxLen     INT = 20,
    @Suffix     NVARCHAR(10) = N'...'
AS
BEGIN
    DECLARE @sql NVARCHAR(MAX) = N'
        SELECT 
            CASE 
                WHEN LEN(' + QUOTENAME(@ColumnName) + N') > @MaxLen
                THEN SUBSTRING(' + QUOTENAME(@ColumnName) + N', 1, @MaxLen) + @Suffix
                ELSE ' + QUOTENAME(@ColumnName) + N'
            END AS DisplayText
        FROM ' + QUOTENAME(@TableName) + N';';

    EXEC sp_executesql @sql, N'@MaxLen INT, @Suffix NVARCHAR(10)', @MaxLen, @Suffix;
END
GO

前端替代方案（CSS 純樣式截斷，不修改資料）

/* 單行截斷 + 省略號 */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* 或 width */
    display: inline-block;
    vertical-align: bottom;
}

/* 多行截斷 (WebKit/Blink) */
.truncate-3lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

✅ **推薦前端 CSS 處理**：資料完整、支援響應式、無需資料庫計算、利於複製/無障礙存取。
🔧 **SQL 截取適用場景**：匯出報表、簡訊/推播內容、舊版瀏覽器不支援 CSS 省略號、資料量極大需減少網路傳輸。

結語

SQL 層用 SUBSTRING + CASE + LEN 可精準控制截斷與省略號邏輯；現代 Web 開發**優先採用 CSS text-overflow: ellipsis**，保留資料完整性並分離關注點。依專案需求選擇適當層級處理，才是成熟架構師的態度。