Question

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

这是我的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;
    }

Answer 1

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

Answer 2

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

word-break: break-word;

这是w3学校的链接：

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

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

https://jsfiddle.net/rhpumk0d/

Answer 3

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

text-overflow: ellipsis才有效。

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

Answer 4

将类文本添加到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

Answer 5

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

word-wrap:break-word;

或

word-break:break-all;

应该工作

Clean mozilla cache

Clean Chrome cache

CSS / Bootstrap表的文本溢出控制

5 个答案: