<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。
关闭 6 年前。
javascript - 列中的数据跑出页面，如何包含/包装它
我有 bootstrap 3.x.x。并不是说我有更多的数据。我刚刚看到这些行横跨页面。 这是它的 fiddle
https://jsfiddle.net/m562283y/
因为它是动态的，所以我不会明显地知道何时插入 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>
最佳答案
您的表格布局需要修复。放入以下CSS:
table{
table-layout:fixed;
}
table td{
word-wrap: break-word;
}
这是你的 updated fiddle
关于javascript - 列中的数据跑出页面，如何包含/包装它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39754566/