bootstrap之table列內容超出部分省略號

想讓bootstrap的table列內容超出部分省略號，要在table上加table-layout:fixed和word-break:break-all，

然后在頭部thead的th加上寬度百分比，最后在列里加個標簽如span，

在這個span加上單行超出部分省略號的css：display: inline-block，overflow: hidden，white-space: nowrap，text-overflow:ellipsis即可

效果圖：

HTML代碼如下：

<table class="data-table table table-bordered table-hover table-responsive">
            <thead>
                <tr>
                    <th width="5%">序號</th>
                    <th width="25%">活動主題</th>
                    <th width="25%">營銷內容</th>
                    <th width="15%">營銷時間</th>
                    <th width="10%">創建者</th>
                    <th width="20%">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td data-class="xd-table-th"><span title="五一大放送">五一大放送</span></td>
                    <td data-class="xd-table-th"><span title="五一大放送，全場五折起">五一大放送，全場五折起</span></td>
                    <td><span title="2019-02-28">2019-02-28</span></td>
                    <td><span title="Jwen">Jwen</span></td>
                    <td>
                        <a href="javascript:void(0);">編輯</a>
                        <a href="javascript:void(0);">刪除</a>
                        <a href="javascript:void(0);">查看效果</a>
                    </td>
                </tr>
            </tbody>
        </table>

css代碼如下：

table{
    text-align:center;
    table-layout:fixed;
    word-break:break-all;
}

table td>span{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}