利用css達到左右兩個文字之間出現RWD的連接線

【HTML】 

<div class="textzoom-line">

    <dd>左側文字1</dd>

    <em></em>

    <dt>說明文字1</dt>

</div>

<div class="textzoom-line">

    <dd>標題2</dd>

    <em></em>

    <dt>標題說明文字2</dt>

</div>

<div class="textzoom-line">

    <dd>標題3</dd>

    <em></em>

    <dt>不曉得要打什麼就隨便啦</dt>

</div>

<div class="textzoom-line">

    <dd>最後一行的標題文字4</dd>

    <em></em>

    <dt>說明</dt>

</div>

【CSS語法】

.textzoom-line { display: flex;}

.textzoom-line dd, .textzoom-line em, .textzoom-line dt {flex-shrink: 0;}

.textzoom-line dd { padding-right: 1em;}

.textzoom-line em { border-bottom: 1px dotted #000000; height: 0.9em; flex: 2;}

.textzoom-line dt { padding-left: 1em; text-align: right;}

【說明】

就是把左文字、中間連接線、右文字用一個 textzoom-line 的 div 包住，並設定成 flex

再將左右兩個文字區塊設定成 flex-shrink:0 --> 代表區塊不跟著縮放，而中間的連結線是可以縮放 flex:2; 

最後細部調整裡面的文字位置和線條顏色就完成了

當螢幕畫面縮小，中間的線條會跟著縮小，左右兩側的文字不會因縮小而跳行