微信小程序小型按钮内文字布局变形

<button id="btn" type="warn">搜索</button>

#btn{width: 50px;height: 24px;border-radius: 24px;background-color: red;color: white;font-size: 14px;display:flex;align-items: center;justify-content: center;
}

这样做出的按钮中的字布局就是变形的，这时只用在button中加个类型就可以了

size="mini"

如果按钮过小内容还是会一列显示

微信小程序小型按钮内文字布局变形相关推荐

微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
场景: 微信小程序真机中 textarea输入框内有很多文字,从中间删除文字,速度快的时候,光标会从中间跳到最后位置! 原因: input.textarea事件中,给input框绑定任何事件后,在处理 ...
微信小程序 - 防止容器内文字过长导致溢出（view / text）
前言在微信小程序中,对 view 与 text 均有效,标题文本太长显示不下,能有效控制文字超出. 我们无法预知后端数据有多少,一旦文字超出容器宽度,那么必然会造成界面变形,下面是解决方案. 单行 ...
微信小程序调整按钮内部文字的边距
方法在style或者css中设置button的属性: padding: 20rpx 10rpx 25rpx 10rpx /*提供四个参数值,将按上.右.下.左的顺序作用于四边.*/ padding: ...
微信小程序解决标签内文字因长度换行问题
因长度过长导致出现iPhone6正常显示,但是iPhone5上就出现换行的情况,可以通过以下css样式解决.但是过长的话,虽然不会换行但是会压榨,右边的空间. word-break: keep-all ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...
微信小程序退出按钮退出方式
微信小程序退出按钮退出方式 1,只能跳转到 tabBar配置的页面 wx.switchTab({url:''../xxx/xxx}) 2.返回上一级页面 (delta:返回的页面数,如果delta大于 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
微信小程序与H5内嵌网页交互实现地图定位功能
小程序中有很多好用的API,整个项目我们是用vue实现的,使用小程序的内嵌网页功能完成交互. 使用小程序的< web-view >标签将vue项目在小程序中运行.大概的背景就是这样.接下来 ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...

微信小程序小型按钮内文字布局变形

微信小程序小型按钮内文字布局变形相关推荐

最新文章

热门文章