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;
}