Question

我有bootstrap 3.x.x.不是说我有更多的数据。我刚刚看到这些行在整个页面上拍摄。这是一个小提琴

因此，由于它是动态的，我显然不会知道何时插入 br标签而且这些都很糟糕......

TD列看起来像这样

<td class="ng-binding">00000006,00000005,00000007,00000008,0000000B,0000000D,0000000F,00000010,00000011,00000012,00000013,00000014,00000015,00000016,00000017,00000018,00000019,0000001A,0000001B,0000001C,0000001D,0000001E,0000001F,00000020</td>

是否采取了一些响应方式来获取包装？

<div class="ui-view ng-scope"><div class="panel panel-primary ng-scope">
    <!--<div class="panel-heading" style="font-size:large">Baker Beach Device Registry
        </div>-->

    <div class="panel-body">

        <!--<div class="alert alert-info">
            <p>Sort key: {{sortKey}}</p>
            <p>Reverse: {{reverse}}</p>
            <p>Search String : {{search}}</p>
        </div>-->
        <!--<div class="row">-->

            <div class="col-lg-12">
                <form class="form-inline ng-pristine ng-valid">
                <div class="form-group">
                    <label>Search</label>
                    <input type="text" ng-model="search" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Search">
                </div>
            </form>
                <div class="panel panel-default">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>

                                <th ng-click="sort('DeviceId')">Device ID
                                    <span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='DeviceId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                </th>
                                <th ng-click="sort('DeviceStatus')">Device Status
                                    <span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='DeviceStatus'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                </th>
                                <th ng-click="sort('StagedManifestIdList')">Staged Manifest
                                    <span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='StagedManifestIdList'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                </th>
                                <th ng-click="sort('ManifestIdList')">Archived Manifests
                                    <span class="glyphicon sort-icon glyphicon-chevron-down ng-hide" ng-show="sortKey=='ManifestIdList'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                                </th>

                            </tr>
                        </thead>
                        <tbody>

                            <!-- ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
                                <!--Add in sref directive-->
                                <td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000200001">00022BBA000000200001</a>
                                </td>

                                <!--<td>{{device.DeviceStatus}}</td>-->
                                <td ng-style="set_color(device)" class="ng-binding" style="color: orange;">Unactivated</td>
                                <!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
                                <td class="ng-binding"></td>
                                <td class="ng-binding">00000002,00000001,00000003,00000004</td>
                                <td>
                                    <a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000200001/info">
                        Edit
                    </a>
                                </td>
                            </tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
                                <!--Add in sref directive-->
                                <td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000220001">00022BBA000000220001</a>
                                </td>

                                <!--<td>{{device.DeviceStatus}}</td>-->
                                <td ng-style="set_color(device)" class="ng-binding" style="color: orange;">Unactivated</td>
                                <!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
                                <td class="ng-binding"></td>
                                <td class="ng-binding">0000000A,00000009,0000000C,0000000E</td>
                                <td>
                                    <a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000220001/info">
                        Edit
                    </a>
                                </td>
                            </tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
                                <!--Add in sref directive-->
                                <td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022BBA000000210001">00022BBA000000210001</a>
                                </td>

                                <!--<td>{{device.DeviceStatus}}</td>-->
                                <td ng-style="set_color(device)" class="ng-binding" style="color: green;">Activated</td>
                                <!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
                                <td class="ng-binding"></td>
                                <td class="ng-binding">00000006,00000005,00000007,00000008,0000000B,0000000D,0000000F,00000010,00000011,00000012,00000013,00000014,00000015,00000016,00000017,00000018,00000019,0000001A,0000001B,0000001C,0000001D,0000001E,0000001F,00000020</td>
                                <td>
                                    <a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022BBA000000210001/info">
                        Edit
                    </a>
                                </td>
                            </tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 --><tr ng-repeat="device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7" class="ng-scope">
                                <!--Add in sref directive-->
                                <td><a ui-sref="deviceDetail({DeviceId: device.DeviceId})" class="ng-binding" href="#/devices/00022B9E000000060001">00022B9E000000060001</a>
                                </td>

                                <!--<td>{{device.DeviceStatus}}</td>-->
                                <td ng-style="set_color(device)" class="ng-binding" style="color: blue;">New Device</td>
                                <!--<td ng-style="{'color':(device.DeviceStatus>1?'red':'blue')}">{{device.DeviceStatus | deviceStatus }}</td>-->
                                <td class="ng-binding">00000022,00000023</td>
                                <td class="ng-binding"></td>
                                <td>
                                    <a class="btn btn-primary" ui-sref="deviceEdit.info({DeviceId: device.DeviceId})" href="#/devices/edit/00022B9E000000060001/info">
                        Edit
                    </a>
                                </td>
                            </tr><!-- end ngRepeat: device in vm.devices|orderBy:sortKey:reverse|filter:search|itemsPerPage:7 -->
                        </tbody>
                    </table>
                    <dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" class="ng-isolate-scope"><!-- ngIf: 1 < pages.length --></dir-pagination-controls>
                </div>
            </div>
        <!--</div>-->
    </div>
</div></div>

Answer 1

您的表格布局需要修复。放入以下css：

canvas

这是你的updated fiddle

Answer 2

如果您不想要非常高的列，这是另一种解决方案：https://jsfiddle.net/pm0e03ab/

temp1

Answer 3

你可以像这样打破文字...... 创建一个类并在css中设置样式

...示例

<div class="row-fluid"> <span class="span3">
          <h1 class="heading">Headingaaaaa aaaaaaaaaaaaaaaaaaaaa</h1>
          <p>Lorem Ipsum...aaaaaaaaaaaah</p>
        </span>
 <span class="span6">
          <h1 class="heading">Headingaaaaa aaaaaaaaaaaaaaaaaaaaa</h1>
          <p>Lorem Ipsum...</p>
        </span>
 <span class="span3">
          <h1 class="heading">Heading Like This</h1>
          <p>Lorem Ipsum...</p>
        </span>

的CSS。

.row-fluid {
    word-wrap: break-word;
}

Answer 4

另一种解决方案是使其可滚动。虽然它不适合您的情况，但它可能对其他内容不太长的情况有用。所以，我也在发布滚动解决方案。

只需将以下类添加到包含该表的immediate div。

.scroll_overflow {
  overflow: auto;
}

列中的数据正在运行页面，如何包含/包装

4 个答案: