Html 在angular 6应用程序中，Div在ngFor指令内自动向右推 {{client.clientName}

{{client.address}、{{client.city}、{{client.state}、{{client.country}-{client.pinCode}

---

这里有一个相当简单的修复方法

您的div的高度不同，因为有时此文本会换行：

<div class="row">
  <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i">
    <!-- small box -->
    <div class="small-box bg-dashboard-box" >
      <div class="inner">
        <div class="text-black">
          <h4>{{client.clientName}}</h4>
          <p>{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p> 
        </div> 
      </div>
      <a (click)="onClientClick(client)" class="small-box-footer">
        Users<i class="fa fa-arrow-circle-right"></i>
      </a>
    </div>

这将确保您的所有div高度相同，并完全避免问题

或者，只需使用省略号溢出：

.clientinfo {
  height: 60px;
}

---

还可以在段落上使用

title

HTML属性，这样当段落被省略号截断时，用户可以将鼠标悬停在文本上查看完整信息。

这不是纯CSS问题吗？我不确定什么

*ngFor

不允许您在这里执行。尽管这是一个UI问题。我无法在第三列div（跨越三列）之后添加空div。请发布您希望在静态HTML中获得的内容，我们将使用角度构造帮助您完成同样的操作。不应该有一个空div..就像在ImageThank中一样。非常感谢。这两种解决方案都非常有效。

<p class="clientinfo">{{client.address}}, {{client.city}}, {{client.state}}, {{client.country}}-{{client.pinCode}}</p>

.clientinfo {
  height: 60px;
}

.clientinfo {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}