html lorem自动填充,使用 lorem 快捷生成随机文本填充页面

开发网页时,需要临时添加一些测试文字来添充页面内容,这时就可以考虑使用哑元文本 “Lorem ipsum”

背景介绍

Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

Lorem ipsum从西元15世纪开始就被广泛地使用在西方的印刷、设计领域中,在电脑排版盛行之后,这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头,并且常被用于标题的测试中,所以一般称为Lorem ipsum,简称为Lipsum。

快速使用

在编程中,我们也可以使用Lorem ipsum来填充页面,测试显示效果。主要是通过编辑器中自带的 Emmet 插件,识别以 lorem 开头的短语,生成指定格式的内容。以下介绍均以 vscode 为测试载体。

注意:lorem 短语需要手动输入,复制粘贴不会触发编辑器的 Emmet 识别;在输入后,编辑器出现 Emmet 快捷提示,按回车即可

新建默认数量词语的句子

lorem + Tab/Enter,新建一共30个词语的句子Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ipsam, pariatur illum odit beatae numquam ab fuga voluptas sequi maxime praesentium, atque amet doloribus nostrum, eveniet aliquam perferendis perspiciatis repellat?

新建指定数量词语的句子

loremN,其中 N 是一个数字,代表有 N 个词语(注意不是字符串长度为 N )// lorem10

填充指定行数的内容

loremN,其中 N 是一个数字,代表有 N 行// lorem3

结合两者,填充指定行数且指定词语数量的内容

loremNM,填充 M 行内容,每行 N 个词语// lorem104

快速生成包含网页节点的内容

HtmlNode.class#id*N>leremN,HtmlNode 是节点名称(div、a 等)

P*4>lorem10

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值