微信小程序--首行缩进

最新推荐文章于 2025-01-05 15:05:14 发布
最新推荐文章于 2025-01-05 15:05:14 发布
阅读量5.6k 收藏 5
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44225182/article/details/104455857
版权

前言

最近在更新小程序的时候，需要对作品进行一定的文字简介，为了美观，需要对文字进行首行缩进。

实现

利用text-indent就可以了

   <view class="text-gray padding" style="text-indent:2em;">文字</view>

PS:如果利用text，直接用空格替代前面两个字就行（感觉不太好）

效果图

在这里插入图片描述

更多项目源码、资源

需要学习资料的小伙伴
请前往海轰的微信公众号：海轰Pro
回复：海轰
就可以啦

微信小程序 - text 标签设置 text-indent 不起作用解决方法
王二红
08-07 3391
前言 在小程序中使用 text 标签包裹了一段话，要做一个 首行缩进 的效果，但是不起作用。 解决 使用 view 标签代替 text，使用 text-indent: 2em 即可解决。
微信小程序 - text标签的text-indent属性无效的解决方法
MfddMobile的博客
09-17 477
在这篇文章中，我将分享一种解决这个问题的方法，并提供相应的源代码示例。通过将text标签放在view标签中，并在CSS中设置text-indent属性，我们可以解决微信小程序中text标签的text-indent属性无效的问题。这种方法利用了view标签的块级特性，使text-indent属性生效，从而实现了段落首行缩进的效果。这样做的好处是可以保持text标签的特性，并使text-indent属性生效。接下来，在对应的CSS文件中，我们可以为包裹text标签的view标签设置text-indent属性。
【微信小程序】首行缩进、 去掉/取消首行缩进
梦和远方的博客
04-29 6226
首行缩进 text-indent:2em; text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位； em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，就等于缩进两个文字的宽度...
微信小程序rich-text 文本首行缩进和图片居中和富文本rich-text 解析多个空格不成功 &nbsp
coldriversnow的专栏
11-16 2288
使用rich-text组件渲染html格式的代码，常常因为不能自定义css导致文本不能缩进，以及图片不能居中等问题，这里可以考虑使用js的replace方法，替换字符串，然后在渲染的同时加载行内样式。
小程序富文本editor首行缩进
qq_30351747的博客
10-05 3261
小程序富文本editor首行缩进 思路 自定义一个工具icon，点击这个icon就在html文本上添加一个空格符 效果图 代码 在editor.wxml上添加如下代码 <i class="iconfont" bindtap="indentClick"> ➔ </i> 在editor.js里添加如下方法 indentClick(){ // 点击添加缩进 this.editorCtx.insertText({ text: "ㅤㅤ" }) }, .........
微信小程序 首行缩进、 去掉/取消首行缩进
热门推荐
武当山道士的博客
10-13 3万+
首行缩进 .wxss 代码如下：.str1{ text-indent: 20rpx; text-align: left; }//首行缩进20rpx取消首行缩进.str1{ text-indent: 0rpx; padding-left: 0rpx; text-align: left; }// 取消首行缩进，在小程序里光靠 text-indent:0rpx是不够的，必须加上 padd
微信小程序 首行缩进 text 标签 text-indent 不起作用
qq_57278020的博客
09-07 2861
服务器时区值无法辨认或表示多个时区 如果你想使用时区支持 你必须通过服务器时区配置属性来配置服务器或JDBC驱动从而使用更具体的时区值，在url后面加?使用view标签代替text标签，text-indent：2em是可以起到首行缩进作用的。
微信小程序富文本去除首行缩进样式_如何去除富文本中的html标签及vue、react、微信小程序中的过滤器...
weixin_36427956的博客
12-30 545
在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过1.富文本去除html标签去除html标签及 空格let richtext = ' sdaflsjf的丰富及饿哦塞尔dsfjlie';/* 去除富文本中的html标签 *//* *、+限定符都是贪婪的，因为它们会尽可能多的匹配...
微信小程序代码文字首行缩进的代码
06-20
在微信小程序的代码中，HTML标签默认遵循标准的HTML缩进规则，即每个层级的标签都会有一个固定的缩进。如果你想改变文字的首行缩进，你可以使用CSS来设置`text-indent`属性。例如，如果你想要设置一个元素的文字首行...
微信小程序——第三章开发框架
最新发布
总裁余（余登武）博客
01-05 1127
小程序开发框架有四部分组成：WXML、WXSS、WXS、JavaScriptJavaScript 是一种轻量的、解释型的、面向对象的头等函数语言，是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。见学习链接学习JavaScript这一篇就够了。
微信小程序文章怎么首行缩进或取消首行缩进
酱茄 jiangqie.com
07-19 3070
很多同学问酱茄小编，微信小程序怎么让文章首行缩进或取消文章首行缩进，代码参考了大神“武当山道士”，表示感谢，以下代码大家仅供学习参考。 首行缩进 .wxss 代码如下： .str1{ text-indent: 20rpx; text-align: left; } 取消首行缩进 .wxss 代码如下： .str1{ text-indent: 0rpx; p...
微信小程序实现首行缩进、取消首行缩进
zlq_CSDN的博客
03-17 8369
首行缩颈wxss代码如下： .tip p:last-child{ text-indent: 60rpx; //首行缩进60rpx text-align: left; } 取消首行缩进wxss代码如下： .tip p:last-child{ text-indent: 0rpx; //首行缩进0rpx padding-left: 0rpx; tex...
微信小程序编辑器代码格式缩进设置
风烟
09-03 1127
然后设置tab为空格，并且设置占几个空格，这里是4个空格。这样就好了，文件保存就会自动设置好缩进格式了。
微信小程序rich-text 文本首行缩进和图片居中
.伊泽瑞尔
11-26 417
微信小程序rich-text 文本首行缩进和图片居中
小程序，对返回的字符串进行分段且每行实现首行缩进
博客
03-23 712
小程序---对返回的字符串进行分段且每行实现首行缩进。
微信小程序如何段落首行缩进
R_K_C的博客
07-10 3948
微信小程序中“text”标签首行缩进会失效，换成“view”标签用text-indent:2em;可生效。
微信小程序字符缩进
gyueh的博客
03-17 2446
缩进两个字符 p{text-indent:2rem}
微信小程序使用rich-text渲染后台保存的富文本数据时不能渲染出空格、首行缩进的解决
m0_68964998的博客
08-09 934
给rich-text标签加上 style="white-space:pre-wrap;PC端使用quill-editor 富文本编辑器不能回显空格同理。
微信开发者工具 如何设置代码的缩进
weixin_72322475的博客
10-02 1770
总结微信开发者工具 如何设置代码的缩进
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海轰Pro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值