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>

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

或者可以选择做什么？我知道文本溢出等等，但由于这些是组合跨度，我无法让它正常工作退出。

Answer 1

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

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

然后，您需要在任何消费者中注入此服务，这需要一些基于视频大小执行某些操作或计算。 E.g：

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){
}

这意味着对于超过900px的屏幕，将应用的CSS属性是默认情况下CSS上的属性，但对于小于900px的屏幕，将应用的CSS属性是属性你有这个范围。

因此，例如，如果为ID范围设置一个user，为groupname范围设置一个@media screen and (max-width: 900px){ #user{ display: none; //Or whatever you want. } #groupname{ display: none; //Or whatever you want. } }，则可以执行以下操作：

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

以一定宽度裁剪跨度

2 个答案: