带有 CSS/Bootstrap 表的文本溢出控制

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

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

word-break: break-word;

这是来自 w3 学校的链接：

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

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

https://jsfiddle.net/rhpumk0d/

Answer 2

text-overflow: ellipsis 仅在文本父元素具有声明的宽度时才有效。

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

Answer 3

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

word-wrap:break-word;

或

word-break:break-all;

应该可以工作

Clean mozilla cache

Clean Chrome cache

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

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