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

妖狐艹你老母 2022-01-17 02:21 625阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
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的内容自动换行(转)][pre]  
  
 历程：  
         最开始想到用<textarea>标签，但发现它不会自动高度，又参考《[【指令篇】ionic3自适应大小textarea指令][ionic3_textarea]》写指令实现，但觉得比较麻烦，最终选了<pre>标签解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220117/34e9af9392a24effa6a079d47c14e717.png
[pre]: https://www.cnblogs.com/qq78292959/p/4193142.html
[ionic3_textarea]: https://www.jianshu.com/p/f25af70d5556