清單效果

<dl class="row">

    <dd class="d-flex justify-content-end col-4 col-sm-5 col-md-6">活動:</dd>

    <dd class="col-8 col-sm-7 col-md-6">大溪一日遊</dd>

    <dd class="d-flex justify-content-end col-4 col-sm-5 col-md-6">日期:</dd>

    <dd class="col-8 col-sm-7 col-md-6">2021-12-31</dd>

</dl> 

<style>

  dl dd:nth-child(odd) { // 左邊文字強制不換列，超過則裁切

    padding-left: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow:clip;

  }

  dl dd:nth-child(even) { // 右邊文字強制不換列，超過則出現...

    padding-right: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

</style>