用pre标签解决换行、自动高度 （实用）

需求：
        红框的内容从数据库中取出，行数不确定，要求自动调整高度

html

    <div class="container">
        <div class="sm-item">
            <div class="item-label">特权说明</div>
            <pre class="item-text">{{data.Summary}}</pre>
        </div>

        <div class="sm-item">
            <div class="item-label">有效日期</div>
            <pre class="item-text">{{data.ExpiryDate}}</pre>
        </div>

        <div class="sm-item">
            <div class="item-label">使用须知</div>
            <pre class="item-text">{{data.Terms}} </pre>
        </div>
    </div>

css

.sm-item {
        display: flex;
        flex-flow: row nowrap;
        padding-left: 16px;
        font-size: 1.6rem;

        .item-label {
            width: 64px;
            min-width: 64px;
            margin: 11px 8px 11px 0px;
            color: rgb(153, 153, 153);
        }

        .item-text {
            flex: 1 1 auto;
            margin: 11px 8px 11px 16px;
            font-family: inherit !important;

            /*超过宽度，自动换行*/
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    }

 参考：
1、使pre的内容自动换行(转)

 历程：
         最开始想到用<textarea>标签，但发现它不会自动高度，又参考《【指令篇】ionic3自适应大小textarea指令》写指令实现，但觉得比较麻烦，最终选了<pre>标签解决。