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

本文主要是介绍抄了一个微信小程序的表格。新加表格列文字过长可左右滚动。主要就white-space:nowrap；和td下的overflow-y:auto，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

效果是：

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，但是我使用没成功效果

这篇关于抄了一个微信小程序的表格。新加表格列文字过长可左右滚动。主要就white-space:nowrap；和td下的overflow-y:auto的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---