内部组件和文本之间的引导空间

Question

我的引导程序遇到了一些问题：

我希望在方块之间以及每个方块上的所有文本之间留一个小空白。

有些文本太长，我想知道如何使它们的末尾带有“ ...”。

我尝试过使用CSS，但是我没有成功。

这是与正方形相对应的组件（文档详细信息组件）：

<div *ngIf="document" (click)="onSelect()" class="document">
    <div>
        <label> <b>{{getName()}}</b> </label>
    </div>
    <br>
    <div *ngIf="document.date">
        <label> <b> Date: </b> </label> {{document.date}}
    </div>
    <span [ngClass]="{'glyphicon glyphicon-plus-sign': selected === false,
    'glyphicon glyphicon-ok-sign': selected === true}" ></span>
</div>

为了使所有正方形大小相同，我使用了css：

.document{
    height: 9em;
}

但是我不知道这是否是最好的解决方案。

谢谢

编辑：

这是生成所有网页的html文件：

<div class=container>
  <div class="row">
    <div class="col-md-offset-3 col-md-6 col-md-offset-3 text-center">
      <div [ngClass] ="{'alert alert-success': status === 'ElasticSearch Server is working !',
            'alert alert-danger': status === 'ElasticSearch Server is down !',
             'alert-dismissible': 'true',
             'fade in': 'true'}" data-dismiss="alert">
            <strong>{{status}}</strong> 
    </div>
  </div>
</div>


<div class="row">
  <ul class="list-inline col-md-offset-2 col-md-5 col-md-offset-2" >
    <h5> <strong> Parameters:  </strong></h5>
      <li *ngIf="displayedSearchParams?.length < 1"> No parameters
      <li class="list-group-item parameters" *ngFor="let param of displayedSearchParams" >{{ param }} <span class="glyphicon glyphicon-remove-circle" (click)="onDelete(param)"></span>
      </li>
  </ul>
</div> 

<div class="row">
  <form class="form-group col-md-offset-2 col-md-8 col-md-offset-2">

    <ng2-completer placeholder="Search..." class="input-sm form-control col-md-3" [(ngModel)]="searchStr" [datasource]="options" [minSearchLength]="1" 
      (keyup)="search($event, this.ControlSearch)" 
[formControl]="ControlSearch"></ng2-completer>


    <ng2-completer placeholder="Country, region, city,..." class="input-sm form-control col-md-2" [(ngModel)]="searchCity" [datasource]="cities" [minSearchLength]="3" 
      (keyup)="search($event, this.ControlCity)" 
[formControl]="ControlCity"></ng2-completer>

    <label class="checkbox-inline text-center"><input type="checkbox" 
[formControl]="ControlCSV" (click)="onClickCSV()">CSV</label>
    <label class="checkbox-inline text-center"><input type="checkbox" 
[formControl]="ControlPictures" (click)="onClickPictures()">Pictures</label>

  </form>
</div>


<div *ngIf="documentSources" class="row">
  <app-documentlist [documentSources]="documentSources"></app-documentlist>
</div>

这是文档列表组件的html文件：

<div class="row">
 <div *ngFor="let documentSource of documentSources" style="margin-top:20px">
    <div class="col-xs-4 col-sm-3 col-md-2">
        <app-document-details [document]="documentSource._source"> </app-document-details>
  </div>
</div>

<div class="row">
<div *ngIf="documentSources?.length < 1" class="alert alert-warning col-md-offset-3 col-md-6 col-md-offset-3 text-center">
  <p>No files found! {{documentSources}}</p>
  </div>
</div>

对于CSS，我使用的是Bootstrap 3.3.7和小型CSS：

.completer-input{
    display: inherit;
    width: 58em;
    border : none;
}

.completer-selected-row {
    color: #ffffff;
    width: 20em;
}

.col-height{
    display: flex;
    flex-direction: column;
    border-color: green;
    border-width: 0.2em
}

.parameters{
    height: 2em;
    line-height: 0.1em;
}

.document{
    height: 9em;
    border: 4em;
}