找回密码
 立即注册

QQ登录

只需一步,快速开始

吴小胖 讲师达人认证 悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2022-2-21 13:54  /   查看:3354  /  回复:9
今天继续折腾自己的第一个作品——荣誉证书生成器,但是遇到了一个问题,多行文本没有行间距的设置,这就让页面显得特别拥挤,排版不美观。 image.png620441588.png
【折腾之路】
第一个想到了使用css来解决,但是,css对多行文本内的内容根本不起效……
第二个想到直接修改单元格的属性,但是,右键后什么都没有……
image.png604549865.png
第三个论坛上去看看有么有什么解决方案~转了一圈,答案是:多行文本框没有行间距设置……html有~
那如果html有,是不是就可以直接使用了呢?
直接把多行文本换成html插件,运行……文本没有任何格式了~
转动小脑瓜开始思考:为什么没有格式呢?因为就没有赋予它格式,单元格格式对它不生效,只能通过html给它格式,它的格式都是html代码~
代码,眼前一亮~哈哈哈,解决问题的办法来了~
把代码存下来,然后跟我的这部分内容合并,那不就解决了嘛~
说干就干~
先新建一个工程文件,然后,拖拽一个html插件进来~
image.png387050780.png
建一张表,用来存储html代码,加一个按钮,命令为提交到数据库
image.png891144714.png

image.png15468443.png

然后运行~

image.png965829772.png
看到这里有没有知道我要做什么的大佬了~嘿嘿~
image.png460527343.png
文字内容也有了,我们刚才纠结的不是行间距问题吗~看看这个编辑器里就有行间距的设置啊~
image.png288769835.png
然后,重头戏来了~点一下按钮,把这些内容存到数据库去
image.png542946776.png
有些小伙伴可能会疑惑了,存到库里的这是什么东东?要的就是这个~哈哈哈哈~这就是可以改变多行文本行间距的法宝~
仔细观察一下,代码被我们的文字隔开了,我们分别把这两部分内容复制出来,然后贴到我们需要行间距的位置~
image.png155774840.png
然后把这两列的值和我们之前的奖状内容合并~
image.png216985167.png
然后,再把荣誉证书里的多行文本换成html插件,隐藏工具栏,这样就可以随意改变行间距了~是不是很机智~
image.png458714599.png
这样是不是就看着舒服多了~哈哈哈~~~




评分

参与人数 1金币 +200 收起 理由
Chelsey.Wang + 200 赞一个!

查看全部评分

9 个回复

倒序浏览
phoben讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-2-21 21:16:34
推荐
给你个简单方法吧

将下方CSS代码,上传到活字格,或者加入到已有CSS文件中。
  1. .multiline-text label {
  2.     line-height: 35px;
  3. }
复制代码



将单元格设置"自动换行"后,添加一个类名即可!

image.png538022155.png

image.png235384520.png


效果:
image.png71814574.png


进阶玩法:
已知,我们利用一句CSS可以改变行距,那么我们就可以多定义几个类
  1. .multiline-text-35 label {
  2. line-height: 35px;
  3. }
  4. .multiline-text-45 label {
  5. line-height: 45px;
  6. }
  7. .multiline-text-55 label {
  8. line-height: 55px;
  9. }
  10. .multiline-text-65 label {
  11. line-height: 65px;
  12. }
复制代码


这时,我们就拥有了4个不同行距的类名,用哪一个,行距就对应哪一个
image.png737333373.png

评分

参与人数 1金币 +200 收起 理由
Chelsey.Wang + 200 赞一个!

查看全部评分

回复 使用道具 举报
玉轩悬赏达人认证 活字格认证
高级会员   /  发表于:2022-2-21 15:08:13
沙发
回复 使用道具 举报
scliudong
高级会员   /  发表于:2022-2-21 17:05:29
板凳
牛,没有做不到,只有想不到。
回复 使用道具 举报
hubei333
高级会员   /  发表于:2022-2-21 20:26:29
地板
的确是解决单元格行间距的好办法, 00043AF2.png916946105.png
回复 使用道具 举报
吴小胖讲师达人认证 悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2022-2-21 21:26:17
6#
phoben 发表于 2022-2-21 21:16
给你个简单方法吧

将下方CSS代码,上传到活字格,或者加入到已有CSS文件中。

哈哈哈哈,谢谢超哥~那估计是我的css没用对~
回复 使用道具 举报
13794930121活字格认证
银牌会员   /  发表于:2022-2-25 15:04:11
7#
好吧,你们都是大神真会玩。。。
回复 使用道具 举报
nsc117
中级会员   /  发表于:2022-2-26 19:57:38
8#
CSS是最简单的,活字格能直接指定最好。
回复 使用道具 举报
数据民工悬赏达人认证 活字格认证
高级会员   /  发表于:2022-3-1 19:57:32
9#
看了下一步就要学习CSS类怎么写了
回复 使用道具 举报
洗尿布的活字格认证
中级会员   /  发表于:2022-3-3 14:22:55
10#
没有大佬解决不了的问题
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部