Angular ngFor 2列と行が整列する

Question

私はAngular5アプリを持っていて、2列に表示したい文字列を持っています。私は、次のコードを持っている：

<div *ngFor="let singleItem of sevices;> 
    <div style="width: 45%; float: left;background-color:red"> 
     {{singleItem}}    
    </div>   
</div> 

これは動作しますが、しかし、文字列が長すぎる場合、それは行の左側にある空の列どのように見えるかを引き起こす可能性があります。私は、左と右の列を1つの行に表示させ、各列の上端を揃えるようにしたいと考えています。どのようにこれを行うにはどのようなアイデア？

Answer 1

text-overflow: ellipsisプロパティを使用します。

<div *ngFor="let singleItem of sevices;> 
    <div 
     style="width: 45%; 
     float: left; 
     background-color:red 
     white-space: nowrap; 
     overflow:hidden !important; 
     text-overflow: ellipsis;"> 

     {{singleItem}}    
    </div>   
</div> 

Answer 2

ブートストラップクラスは、アプリに組み込んだ場合でも使用できます。

<div class="row" *ngFor="let singleItem of sevices;let i = index;> 
 
    <div class="col-md-6" class="left-style" *ngIf="i%2 == 0"> 
 
     {{singleItem}}    
 
    </div> 
 
    <div class="col-md-6" class="right-style" *ngIf="i%2 != 0"> 
 
     {{singleItem}}    
 
    </div> 
 
</div>

あなたは今COL-MD-6ために指定したクラスに、あなたのスタイルを追加することができたdiv

Answer 3

最も簡単な解決策は、CSSクラスを追加した "列数：2;"私の外側のdivに。