Angular & Bootstrap4：如何垂直对齐多个带有可变长度标签的单选按钮？

Question

我试图列出带有可变长度标签的单选按钮，如下所示。
问题在于，由于每个标签的长度不同，单选按钮不会垂直对齐。
如何使它们正确对齐？

<div class="row">
 <div class="form-check form-check-inline" *ngFor="let t of accountTitles; let index = index; let first = first; let last = last;">
  <input class="form-check-input" type="radio" name="accountTitle" id="accountTitle_{{t.accountTitleId}}" value="t.accountTitleId" [checked]="t.accountTitleId == accountTitleId">
  <label class="form-check-label"  [ngClass]="{'has-subsidiary' : t.subsidiaryAccountTitles.length > 0}" for="accountTitle_{{t.accountTitleId}}">{{t.accountTitleName}}</label>
 </div>
</div>

Answer 1

您可以在标签上设置固定宽度，然后任何溢出文本都会用省略号 (...)

https://www.codeply.com/go/I8sCvM6oCT

.form-check-label {
    width: 80px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

---

或者，响应式方法是使用网格列和标签的text-truncate类。 不需要额外的 CSS ：

https://www.codeply.com/go/Lmby8RaHab

<div class="row">
           <div class="form-check form-check-inline col-3">
                    <input class="form-check-input" type="radio" name="accountTitle">
                    <label class="form-check-label text-truncate">some label</label>
           </div>
           <div class="form-check form-check-inline col-3">
                    <input class="form-check-input" type="radio" name="accountTitle">
                    <label class="form-check-label text-truncate">aaa</label>
           </div>
           (... more form-check)
</div>