CSS / Bootstrap表的文本溢出控制

时间:2017-09-06 15:13:07

标签: html css twitter-bootstrap

我尝试使用word-wrap以及向td添加一个类来执行text-overflow: elipsis但似乎没有任何影响这个特定的表格,我最终得到了这个:

enter image description here

这是我的HTML / CSS:

<div class="row">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">Family Checks: no placed instances, >1MB size, misnamed</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-fixed" style="table-layout: fixed; width: 100%;">
                        <thead>
                        <th class="col-xs-1 text-center">
                        #
                        </th>
                        <th class="col-xs-7"><a href="" ng-click="vm.sortType = 'name'; vm.sortReverse = !vm.sortReverse">
                        Name
                        <span ng-show="vm.sortType == 'name' && !vm.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="vm.sortType == 'name' && vm.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                        </a></th>
                        <th class="col-xs-1 text-center"><a href="" ng-click="vm.sortType = 'instances'; vm.sortReverse = !vm.sortReverse">
                        Qty.
                        <span ng-show="vm.sortType == 'instances' && !vm.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="vm.sortType == 'instances' && vm.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                        </a></th>
                        <th class="col-xs-1 text-center"><a href="" ng-click="vm.sortType = 'sizeValue'; vm.sortReverse = !vm.sortReverse">
                        Size
                        <span ng-show="vm.sortType == 'sizeValue' && !vm.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="vm.sortType == 'sizeValue' && vm.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                        </a></th>
                        <th class="col-xs-2 text-center"><a href="" ng-click="vm.sortType = 'elementId'; vm.sortReverse = !vm.sortReverse">
                        Element Id
                        <span ng-show="vm.sortType == 'elementId' && !vm.sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="vm.sortType == 'elementId' && vm.sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                        </a></th>
                        </thead>
                        <tbody>
                            <tr ng-repeat="i in vm.AllFamilies | orderBy: vm.sortType : vm.sortReverse">
                                <td class="col-xs-1 text-center">{{$index}}</td>
                                <td class="col-xs-7 text-left">{{i.name}}</td>
                                <td class="col-xs-1 text-center">{{i.instances}}</td>
                                <td class="col-xs-1 text-center">{{i.size}}</td>
                                <td class="col-xs-2 text-center">{{i.elementId}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

我的css:

.table-fixed{
        width: 100%;
        background-color: white;
        table-layout: fixed;
        word-wrap: break-word;
    }

    .table-fixed tbody{
        height: 500px;
        overflow-y: auto;
        width:100%;
    }

    .table-fixed thead, tbody, tr, td, th {
        display: block;
    }

    .table-fixed tbody td{
        float: left;
    }

    /*Header*/
    .table-fixed thead tr th {
        float: left;
        background-color: #00b3ee;
        border-color: #00b3ee;
    }

5 个答案:

答案 0 :(得分:1)

尝试将overflow: hidden;text-overflow: ellipsis;white-space: nowrap;添加到td

答案 1 :(得分:0)

有一个用于打破长词的CSS属性。试一试。

word-break: break-word;

这是w3学校的链接:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

这是一个小提琴我放在一起演示在td元素中使用它:

https://jsfiddle.net/rhpumk0d/

答案 2 :(得分:0)

仅当文本父元素具有声明的宽度时,

text-overflow: ellipsis才有效。

尝试为 td 元素添加固定宽度,看看情况如何。

答案 3 :(得分:0)

将类文本添加到td / th并填充span中的文本。

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

Bootstrap 3 truncate long text inside rows of a table in a responsive way

答案 4 :(得分:0)

很抱歉说明了,但是你在更改后清理了浏览器的缓存了吗?有时css的样式不会改变,只要它仍然使用缓存定义...

word-wrap:break-word;

word-break:break-all;

应该工作

Clean mozilla cache

Clean Chrome cache