Question

我有一个Angular5应用程序，并且我想要在2列中显示一个字符串数组。我有以下代码：

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

如果您已将其包含在应用中，则可以使用引导类。

＆＃13;

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

＆＃13;

现在，您可以将给定类的样式添加到col-md-6 divs

Answer 3

最简单的解决方案是添加CSS类“column-count：2;”到我的外部。

Angular ngFor有2列和行对齐

3 个答案: