不换行,不省略,不截断,固定宽度内左右滚动。
效果是:
let a = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
【 {{ a }} 】
【】文字不会超过a,也不会挤大【】,可以在【】中左右滚动
1、代码表格
<view class="table">
<view class="tr bg-w">
<view class="th" wx:for="{{ grfListColumns }}" wx:key="field">{{item.title}}</view>
</view>
<block wx:for="{{grfList}}" wx:key="{{id}}" wx:for-item="grf" >
<view class="tr">
<view class="td" wx:for="{{ grfListColumns }}" wx:key="field">
<view style="overflow-y: auto">
{{grf[item.field]}}
</view>
</view>
</view>
</block>
</view>
2、css样式,主要就white-space:nowrap;和td下的overflow-y:auto
.table {
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
/* display: -webkit-box; */
/* word-break:break-all; */
/* text-overflow: ellipsis; */
overflow: hidden;
/* -webkit-box-orient:vertical; */
/* -webkit-line-clamp:2; */
white-space: nowrap;
/* 设置 需要显示的行数 */
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 3rem;
align-items: center;
}
css的样式,我只把东西效果改出来了,有些样式应该还是有问题,可以自己看看,我后期也再编辑编辑
贴几个搜索匹配,不知道有没有用:微信小程序 文字过多溢出 滚动文字 滑动文字
我有搜到scroll-view,但是我使用没成功效果