html - Angular隐藏字符串中的最后一个空格

Question

我有三列，由 3 个 div 构建。每个 div 都包含一个带有文本的变量。中间的 div 只包含 1 个字母，右边的 div 至少包含 1 个字母，排列在左边。但左边的 div，至少包含 1 个字母，但这应该是向右对齐的。这也适用于字母（方向：rtl），但缺少最后一个空格。所以变量是“Test”，但没有显示下面的空格。

我该如何实施？

    <div class="display">
      <div class="shown">{{shown}}></div>
      <div class="current">{{current}}</div>
      <div class="not_shown">{{next}}</div>
    </div>

.display {
  width: 20em;
  height: 2em;
  display: flex;
  margin: 10px auto;

  * {
    border: 1px solid #f2e9e1;
    vertical-align: center;
  }

  .not-shown, .shown {
    width: 10em;
    overflow: hidden;
    white-space: pre;
  }

  .shown {
    direction: rtl;
  }
  // Was a solution, but the space was missing and the ,. are swapped
  .shown_old {
    display: block;
    text-align: right;
    color: rgba(0,0,0, 0.4);
    display: inline-block;
    white-space: nowrap;
    direction: rtl;
    text-overflow: clip;
    overflow: hidden;


  }
  .current {
    width: 1em;
    flex-grow:0;
    text-align: center;
    cursor: pointer;
    background-color: #f2e9e1;

  }
  .not_shown {
    text-align: left;

    display: inline-block;
    white-space: nowrap;
    text-overflow: clip;
    overflow: hidden;

  }

  .shown, .not_shown {
    flex-grow: 2;
    width: 8em;
  }
}

我想在左侧的“Das”之后有一个空格。暗箱前有“B”。有谁知道，我该如何解决这个问题？