带有 CSS/Bootstrap 表的文本溢出控制 [英] text overflow control with CSS/Bootstrap table

问题描述

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

这是我的 HTML/CSS:

<div class="panel-group"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title">Family Checks:没有放置的实例，>1MB 大小，错误命名</h4>
<div class="panel-body"><table class="table table-fixed" style="table-layout: fixed; width: 100%;"><头><th class="col-xs-1 text-center">#</th><th class="col-xs-7"><a href="" ng-click="vm.sortType = 'name'; vm.sortReverse = !vm.sortReverse">姓名<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">数量.<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">尺寸<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">元素 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><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>

我的CSS:

.table-fixed{宽度:100%；背景颜色:白色；表格布局:固定；自动换行:断字；}.table-fixed tbody{高度:500px；溢出-y:自动；宽度:100%；}.table-fixed thead, tbody, tr, td, th {显示:块；}.table-fixed tbody td{向左飘浮;}/*标题*/.table-fixed thead tr th {向左飘浮;背景色:#00b3ee；边框颜色:#00b3ee；}

解决方案

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

I tried using word-wrap as well as adding a class to td to do text-overflow: elipsis but nothing seems to be affecting this particular table and I end up with this:

Here's my 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>

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

解决方案

Try adding overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; to td.

这篇关于带有 CSS/Bootstrap 表的文本溢出控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！