两段文字在一行显示，第二段文字超出后另起一行显示，但不占用第一段文字

要实现这么一个需求：

备注： 后面的值有可能超出一行，产品不让在一行省略号显示，而是要在下一行显示，而第二行的内容要和第一行垂直方向对齐。

用flex布局就可以很容易搞定这个需求。代码如下：

    <style type="text/css">
      .bg{
        width: 300px;
        height: 200px;
        background-color: gray;
        margin: 0 auto;
        display: flex;
      }
      .valueCls{
        flex: 1;
        word-break: break-all
      }
    </style>

    <div class="bg">
      <span>备注：</span>
      <span class="valueCls">aaaddddddddddddddddddddaaaaaaaaaa</span>
    </div>

flex布局， 备注： 和后面的值分为两个子项，后面的这个值子项设置flex: 1  表示占满第一个子项剩余的空间，而word-break 则表示超出换行显示。注意在换行显示的时候，第二个子项不会占用第一个子项的空间。