一定宽度的裁剪跨度

Question

为了使我的菜单具有响应性，我想在达到一定宽度时裁剪一个文本。这是我到目前为止所拥有的：

  <span data-ng-if="vm.getContext().contextType === 'ContextA'">
        <span data-ng-bind="vm.getActiveContext().userName | limitTo: 7"></span>
        <span data-ng-if="vm.getActiveContext().userName.length > 7">...</span>
        <i class="fa fa-arrow-right"></i>
        <span data-ng-bind="vm.getActiveContext().groupName | limitTo: 7"></span>
         <span data-ng-if="vm.getActiveContext().groupName.length > 7">...</span>
        <span
        data-ng-if="vm.getActiveContext().city">, </span><span
        data-ng-bind="vm.getActiveContext().city"></span>
    </span>

问题是，城市价值很重要，不应该被裁剪。但用户名和组名应裁剪为例如 900 像素。我该如何做到这一点？

或者有什么替代方法？我知道文本溢出等，但由于这些是组合跨度，我无法让它正常工作。

Answer 1

如果您需要让应用具有响应性，您可以定义一个服务，该服务将保持当前视口的尺寸。例如：

// Service to hold current dimensions
function dimensionsService($window) {
  // Defining object, that holds dimensions
  var dimensions = {
    width: $window.innerWidth,
    height: $window.innerHeight,
  }

  // Returning dimensions object to the consumers
  return {
    dimensions: dimensions,
  }
}
dimensionsService.$inject = ['$window'];

然后您需要将此服务注入任何消费者，这些消费者需要一些根据视口大小执行一些操作或计算。例如：

function SampleController(service) {
  var vm = this;
  vm.dimensions = service.dimensions;
  vm.cropFilterLength = vm.dimensions.width < 900 ? 5 : 9;

}
SampleController.$inject = ['dimensionsService']

Answer 2

您可以为此使用media query：

@media screen and (max-width: 900px){
}

这意味着对于大于 900 像素的屏幕，将应用的 CSS 属性是您在 CSS 上默认拥有的属性，但对于小于 900 像素的屏幕，将应用的 CSS 属性是你在这个范围内。

因此，例如，如果您为user 跨度设置一个ID，为groupname 跨度设置一个，您可以按如下方式进行：

@media screen and (max-width: 900px){
    #user{
       display: none; //Or whatever you want.
    }
    #groupname{
       display: none; //Or whatever you want.
    }
}