抄了一个微信小程序的表格。新加表格列文字过长可左右滚动。主要就white-space:nowrap;和td下的overflow-y:auto

仅是列左右滚动,要整个表的,配合scroll-view用呗

不换行,不省略,不截断,固定宽度内左右滚动。

效果是:

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的样式,我只把东西效果改出来了,有些样式应该还是有问题,可以自己看看,我后期也再编辑编辑

贴几个搜索匹配,不知道有没有用:微信小程序      文字过多溢出       滚动文字    滑动文字

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值