文字横向自适应宽度并横向排列
2022/1/31 23:16:54
本文主要是介绍文字横向自适应宽度并横向排列,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
如下图左侧图,候选项是后端的数据字典中动态管理的数据,并不能事先知道文本字数,即选项的所占宽度,也就无法直接设定宽度来让文本拥有个比较好的样式,那么想要达到右侧效果图那样的效果该怎么做?
可能很多人会考虑从宽度去解决问题,设置固定宽度 width、最小宽度 min-width...但遇到了字数较多等情况,用户体验并不不怎么好,我愣了一会儿,突然意识到,这是宽度不够,导致文本自动换行了,那我用 css 属性设置文本不换行呢?
- 顺带设置个最大宽度,让太长的文本显示省略号,不至于页面样式混乱
/* 设定最大宽度,超出显示省略号... */ max-width: 350rpx; overflow: hidden; text-overflow: ellipsis; /* 设定最大宽度,超出显示省略号... */ white-space: nowrap; /* 关键样式代码 */
结果还真行,easy 而且个人感觉兼容性还挺好,就很 nice,记录一下
按钮和选项的结构代码
<view class="addBtn" bindtap="addApply"> <view class="options"> <view class="option-row" bindtap="addNewApply" data-value="1">预约来访</view> <view class="option-row" bindtap="addNewApply" data-value="2">营业执照代办</view> <view class="option-row" bindtap="addNewApply" data-value="3">厂房租赁价格代办</view> </view> </view>
按钮和选项的样式代码
.addBtn { width: 120rpx; height: 120rpx; border-radius: 50%; background-color: #00A0E9; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 40%); color: white; font-size: 120rpx; position: fixed; right: 20rpx; bottom: 20rpx; } .addBtn::before { content: ""; display: block; width: 65rpx; height: 10rpx; border-radius: 10rpx; background-color: white; position: absolute; left: calc(50% - 32.5rpx); top: calc(50% - 5rpx); } .addBtn::after { content: ""; display: block; width: 10rpx; height: 65rpx; border-radius: 10rpx; background-color: white; position: absolute; left: calc(50% - 5rpx); top: calc(50% - 32.5rpx); } .options { font-size: 28rpx; position: absolute; right: -20rpx; bottom: 100rpx; opacity: 0; pointer-events: none; transition: right 0.3s; } .options.show { opacity: 1; right: 110rpx; pointer-events: initial; } .option-row { color: white; background-color: #00A0E9; box-shadow: 0 2px 8px 0 rgb(0 0 0 / 40%); /* 设定最大宽度,超出显示省略号... */ max-width: 350rpx; overflow: hidden; text-overflow: ellipsis; /* 设定最大宽度,超出显示省略号... */ white-space: nowrap; /* 关键代码 */ padding: 4rpx 14rpx; border-radius: 4rpx; margin-top: 12rpx; text-align: center; }
点击加号展示收起选项的逻辑代码
Page({ /** * 页面的初始数据 */ data: { showAddOption: false, }, addApply() { this.setData({ showAddOption: !this.data.showAddOption, }) }, addNewApply(event) { let servicetype = event.currentTarget.dataset.value wx.navigateTo({ url: `./form/form?id=&servicetype=${servicetype}`, }) }, })
这篇关于文字横向自适应宽度并横向排列的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南
- 2024-09-30Dnd-Kit学习:新手快速入门指南