微信小程序--文字垂直居中和text高度

最新推荐文章于 2023-10-07 17:40:24 发布
最新推荐文章于 2023-10-07 17:40:24 发布
阅读量8.4k 收藏 2
点赞数 5
分类专栏： 前端笔记 文章标签： 微信小程序 文字样式 垂直居中 text高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_mingyu/article/details/98516626
版权

文字样式

垂直居中

在之前写网页的时候，把文字或div放在外层div中，设置成垂直居中（即内层文字或div距离外层大的div上下边沿距离相等），只需要让外层div的height与line-height值相等，但是在小程序中这样设置是有问题的。花费了好久查到，解决办法：给外层div设置高度后，line-height：100%

text高度问题

text标签会自带一个默认的高度，并且设置height无效，如果想取消高度，设置自定义高度，给text加属性：display:block

tomorain23
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发中常用的组件介绍
m0_72166538的博客
02-23 336
在上面的代码示例中，使用swiper组件展示了一个轮播图，通过设置class属性为swiper，为轮播图添加了样式。在上面的代码示例中，使用button组件展示了一个点击按钮，通过设置class属性为primary，为按钮添加了样式。在上面的代码示例中，使用input组件展示了一个输入框，通过设置class属性为input，为输入框添加了样式。通过设置class属性，可以为view组件添加样式。在上面的代码示例中，使用text组件展示了一个标题文本，通过设置class属性，可以为text组件添加样式。
微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置
hangGe0111的博客
04-30 1万+
1.背景： 在某些场景下，例如在某些详细信息内容展示数据量特别大的时候（有时候特别小），当数据量特别大的时候，需要做展示固定高度，展开更多内容完全展示，收起内容又还原。当内容特别少的时候，例如小于3行，不展示更多按钮。（小程序内容获取的时候是不能知道当前内容有几行的，可能有人会说，我知道字体大小一行内放几个字，几行就再乘以几，让后台算好，传两个字段，展开收起，分别用两个字段即可，理论上是可行的（...
微信小程序-微信小程序-豆瓣电影
08-06
微信小程序-豆瓣电影-测试案例 1、app.js 封装请求方式函数 fetchApi 2、app.json 配置文件(配置页面样式、多少页面、菜单按钮) 3、app.wxss 全局样式文件（定义页面的全局样式） 4、效果图 5、填入appid后保错说明 注意： 小程序请求的接口域名必须是在微信小程序管理平台绑定的域名， 你不能直接请求第三方接口，只能通过你绑定的域名去请求第三方接口给到小程序， 否则会报错！ 项目地址： http://phpxiong.cn/article/show/41 参考项目： 豆瓣电影 官方文档： 官方文档 说明：代码中已有大量的注释！
微信小程序开发-textarea高度问题
热门推荐
长江之水向西流
04-05 3万+
正在做一个记事本的小程序记事自然少不了textarea组件编辑页面我的设计是上面一行标题栏，下面一行按钮操作区，中间就是textarea填充剩余空间效果如下图使用flex布局很容易就做到上述效果，一个container包含一个竖直排列的三个view中间的view放textarea<!--index.wxml--> <form bindsubmit="onSubmit" bind...
微信小程序动态计算文本高度
geng97280的博客
08-26 1073
小程序动态计算内容高度实现展开与收起功能
【微信小程序】解决text标签文字不居中问题
weixin_56924782的博客
09-26 3623
在text标签中添加`margin:-150rpx`就能将以上的文字调整到中间
微信小程序通过createSelectorQuery获取元素 高度，宽度与界面距离
最新发布
weixin_45966674的博客
10-07 3251
小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数。这里 我们定义了 多块 view 都用 行内样式设置了它的 高度和宽度。这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离。这里 我们获取了所有 类名中包含 textIn 的元素 并输出。我们运行代码 并点击按钮 点击查看。我们可以先编写这样一段代码。
微信小程序text设置高度_微信小程序-text组件width失效问题
weixin_35691102的博客
12-31 2065
一、text组件使用想要的效果1538017578(1).jpg1、wxml布局{{category.name}}2、wxss样式.home-category-name-contain {padding-top: 50rpx;padding-bottom: 50rpx;text-align: center;}.home-category-name {color: #005cb7;font-size...
css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应
weixin_39635130的博客
11-29 970
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！简介众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的：如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。设置定高按照官网的...
微信小程序-校园综合服务平台系统源码.zip
05-28
微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务平台系统源码微信小程序-校园综合服务...
【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）
03-19
【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-毕设期末大作业】茶叶商城小程序（含后端源码）.zip 【微信小程序-...
【微信小程序-毕设期末大作业】微信小程序源码leantodu.zip
05-06
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】微信小程序源码小熊的日记.zip
05-06
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序textarea组件回显的时候高度自适应内容
qq_27806371的博客
08-07 454
使用auto-height="true"即可。
小程序 textarea 属性 line-height auto-height 解决方案(独此一家)
qq_33802625的博客
07-28 6441
小程序 textarea 属性 line-height auto-height 解决方案(独此一家)
CSS 文本省略
RGSNbiubiubiu的博客
10-16 556
想让溢出的文本变成....... 形成想要的效果 使用下面三个元素配合实现 overflow: hidden; 隐藏溢出的文本。 white-space:nowarp; 让文本不会自动换行 就可以让第一个属性去隐藏文本了 text-overflow:ellipsis; 让隐藏的文本变成.... overflow 的属性： visible 默认值。...
微信小程序text设置高度_微信小程序中scroll-view高度自适应问题怎么办解决
weixin_42363388的博客
01-13 512
微信小程序中scroll-view高度自适应问题怎么办解决发布时间：2020-08-10 16:16:29来源：亿速云阅读：177作者：小新这篇文章主要介绍了微信小程序中scroll-view高度自适应问题怎么办解决，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。第一种情况，scroll-view占据整屏scroll-view {heig...
小程序图片高度自适应和设置text行高
一元梦寻1rmb.cc
02-16 1091
小程序图片设置宽度100%后宽度能自适应，但是发现高度一直有个240的高度控制，需要通过属性 mode="widthFix"设置 text便签直接设置行高没用，需要在父级标签上设置行高。。。 ...
微信小程序-获取某一元素的高度
xiannverhaha的博客
05-31 1639
this.createSelectorQuery().select("#_house-description").boundingClientRect(res => { this._descriptionTextLoaded = true; if (res) { const { height } = res; if (pixel2rpx(height) &g
微信小程序--中英文切换（1）
06-02
您好，我可以回答您关于微信小程序中英文切换的问题。 在微信小程序中实现中英文切换，可以通过以下两种方式： 1. 使用语言包 在开发微信小程序时，可以利用语言包来实现中英文切换。语言包是一个对象，包含了...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值