以一定宽度裁剪跨度

Cropping Span at certain width

本文关键字：裁剪      更新时间：2023-09-26

为了使我的菜单响应，当达到一定宽度时，我想裁剪一个文本。以下是我目前所拥有的：

  <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>

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

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

如果您需要让应用程序响应，您可以定义一个服务，该服务将保持当前视口的维度。例如：

// 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'];

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

function SampleController(service) {
  var vm = this;
  vm.dimensions = service.dimensions;
  vm.cropFilterLength = vm.dimensions.width < 900 ? 5 : 9;
}
SampleController.$inject = ['dimensionsService']

您可以为此目的使用媒体查询：

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

这意味着，对于900px以上的屏幕，将应用的CSS属性是默认情况下您在CSS上的属性，但对于900px以下的屏幕，将会应用的CSS的属性是您在此范围内的属性。

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

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