我們都知道單行文字超出顯示... ,只要設定四個屬性即可

.base-demo {
    /*width: 500px;*/
    /* 或 % */
    width: 30%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

需求

但是如果我們有這樣一個需求：
就是在一個表格,這個表格可以拖拉改變寬度,有表格有3列，第1列需要固定寬度，第2列要制定一個最小寬度，第3列指定一個寬度

當增加表格的寬度時 第2列需要跟著擴大， 第1、3 列不隨著擴大，

當壓縮表格寬度的時候，小於第3列的寬度的時候，需要壓縮這個指定的寬度，文字超出時需要顯示..., 但第2列的寬度到最小值時就不允許再壓縮了。

實現

因為 2,3 列的特殊性，可以用 div 來實現 table，div 採用 flex 佈局正好能指定空間的分配。

flex 實現這個幾個關鍵的屬性：

flex-grow 屬性
flex-shrink 屬性
flex-basis 屬性
flex 屬性

瞭解了這介個屬性後我們來看具體的程式碼：
佈局

    <div id="drag">
        <div class="table">
            <div class="row">
                <div>ID</div>
                <div>人物介紹</div>
                <div>名字</div>
            </div>

            <div class="row">
                <div>1</div>
                <div>孫悟空是中國明代小說家吳承恩的著作《西遊記》中的角色之一</div>
                <div>孫悟空</div>
            </div>
            <div class="row">
                <div>2</div>
                <div>玄奘（原名：陳玄奘）（602年—644年/664年），唐朝著名的三藏法師</div>
                <div>唐僧</div>
            </div>
            <div class="row">
                <div>3</div>
                <div>豬八戒是吳承恩所作《西遊記》中的角色。法號悟能，是唐僧的二徒弟</div>
                <div>豬八戒</div>
            </div>
        </div>
    </div>
 

flex樣式

    .table .row {
        display: flex;
        white-space: nowrap;
    }

    .table .row  div:nth-of-type(1) {
        width: 80px;
    }

    .table .row  div:nth-of-type(2) {
        flex: 1 0 100px;
        /* 上面這條語句是 下面的簡寫
        flex-grow: 1; flex 的擴充套件量
        flex-shrink: 0; flex 的收縮量
        flex-basis: 100px; 專案的基礎長度
        總結：基礎長度為 100px 小於基礎長度時不允許收縮，空間大於100px時 按照 1的擴充套件量擴充套件
        詳見： https://www.runoob.com/cssref/css3-pr-flex.html
        */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table .row  div:nth-of-type(3) {
        margin-left: 6%;
        /*margin-left: 20px;*/
        flex: 0 1 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
 

完整程式碼 傳送門

效果

參考

flex 屬性

多行文字溢位[...]的實現(text-overflow: ellipsis)

原生js實現div的拖拽與拉伸