需求:
红框的内容从数据库中取出,行数不确定,要求自动调整高度
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>标签解决。