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>1td>
                    <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-28span>td>
                    <td><span title="Jwen">Jwenspan>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;
}