特定の幅でスパンを切り取ります

Question

メニューを反応させるには、一定の幅に達すると1つのテキストを切り抜きたいと思います。

<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

あなたは、この目的のためにmedia queryを使用することができます。

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

のために適用される以上900pxのCSSプロパティを持つスクリーンを使用すると、デフォルトではなく、その画面のためにあなたのCSSに持っている性質であることを意味しています900px未満の場合、適用されるCSSのプロパティは、このスコープ内にあるプロパティです。

だから、あなたはuserスパンのための1 IDとgroupnameスパンのための1つを設定した場合、次のようにたとえば、あなたはそれを行うことができます。

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