Обрезка на определенной ширине

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> 

Проблема в том, что значение города важно и его нельзя обрезать. но имя пользователя и groupname должно быть обрезано, например, 900px. Как это сделать?

Или что было бы альтернативой для этого? Я знаю о переполнении текста и т. Д., Но поскольку это объединенные промежутки, я не мог заставить его работать, как можно скорее.

Answer 1

Вы можете использовать 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. 
    } 
} 

Answer 2

Если вам нужно сделать вас приложение реагировать, вы можете определить сервис, который будет удерживать текущие размеры видового экрана. Например .:

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