Question

我有此复选框列表，我想在标签结束处的每个li处结束。我不希望它遍及整个领域。

我尝试了white-space的不同版本，但没有一个起作用。

angular.module('app',['ui.bootstrap'])

.controller('mainCtrl', function() {
  var vm = this;
  
  vm.alertFilters = [
    { key: 'Filter 1', value: 1 },
    { key: 'Filter 2', value: 2 },
    { key: 'Filter 3', value: 3 },
    { key: 'Filter 4', value: 4 },
    { key: 'Filter 5', value: 5 },
    { key: 'Filter 6', value: 6 },
    { key: 'Filter 777777777', value: 7 },
    { key: 'Filter 888888888888', value: 8 }
	];
  
});

.liAlertFilters {
  display: block;
  float: left;
  width: 100%;
  white-space: nowrap;
}

.ulAlertFilters {
  padding-left: 0;
}

<html ng-app="app">
 <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <div class="col-lg-6 col-md-6 col-sm-12 alertFilters">
          <form>
   
              <label class="control-label">Alert Filters</label>

              <ul class="ulAlertFilters">
                <li ng-repeat="alertFilter in vm.alertFilters" class="liAlertFilters">
                  <input type="checkbox" name="alertsFilter" id="alertsFilter{{::$id}}" ng-value="alertFilter.value">
                  <label for="alertsFilter{{::$id}}" ng-bind="alertFilter.key" class="alertLabel"></label>
                </li>
              </ul>
           
         </form>
    </div>
  </body>
 </html>

我需要它在我的黄线结束处结束

Answer 1

然后删除width:100%，并在每个li之后清除浮点数。

.liAlertFilters {
    display: block;
    float: left;
    clear: both;
    /* width: 100%; */
    white-space: nowrap;
}

Answer 2

如果我的理解正确，您希望li元素占据标签的宽度而不是全宽度。因此，如果您认为标签的宽度为width: 100%，则可以使用100px的固定宽度代替100px。

此外，如果要去除文本，则必须设置overflow: hidden。您可以使用ellipsis样式进行修剪。

.liAlertFilters {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在文本结尾处中断列表行CSS

2 个答案: