登录/注册

首页 › 活字格专区 › 格友杂谈 › 查看内容

金牌服务用户

109 主题	1714 帖子	4953 积分

金牌服务用户

积分: 4953

15813
金币
109
主题
1714
帖子

最新发帖

[资源分享] 【7.0.104】多行文本没有行间距设置的解决方案

讲师达人认证

悬赏达人认证

活字格认证

金牌服务用户 / 发表于：2022-2-21 13:54 / 查看：3352 / 回复：9

今天继续折腾自己的第一个作品——荣誉证书生成器，但是遇到了一个问题，多行文本没有行间距的设置，这就让页面显得特别拥挤，排版不美观。

image.png620441588.png

【折腾之路】
第一个想到了使用css来解决，但是，css对多行文本内的内容根本不起效……

第二个想到直接修改单元格的属性，但是，右键后什么都没有……
image.png604549865.png

image.png604549865.png

第三个论坛上去看看有么有什么解决方案~转了一圈，答案是：多行文本框没有行间距设置……html有~

那如果html有，是不是就可以直接使用了呢？
直接把多行文本换成html插件，运行……文本没有任何格式了~
转动小脑瓜开始思考：为什么没有格式呢？因为就没有赋予它格式，单元格格式对它不生效，只能通过html给它格式，它的格式都是html代码~
代码，眼前一亮~哈哈哈，解决问题的办法来了~
把代码存下来，然后跟我的这部分内容合并，那不就解决了嘛~
说干就干~
先新建一个工程文件，然后，拖拽一个html插件进来~
image.png387050780.png

image.png387050780.png

建一张表，用来存储html代码，加一个按钮，命令为提交到数据库
image.png891144714.png

image.png891144714.png

image.png15468443.png

然后运行~

image.png965829772.png

看到这里有没有知道我要做什么的大佬了~嘿嘿~
image.png460527343.png

image.png460527343.png

文字内容也有了，我们刚才纠结的不是行间距问题吗~看看这个编辑器里就有行间距的设置啊~
image.png288769835.png

image.png288769835.png

然后，重头戏来了~点一下按钮，把这些内容存到数据库去
image.png542946776.png

image.png542946776.png

有些小伙伴可能会疑惑了，存到库里的这是什么东东？要的就是这个~哈哈哈哈~这就是可以改变多行文本行间距的法宝~
仔细观察一下，代码被我们的文字隔开了，我们分别把这两部分内容复制出来，然后贴到我们需要行间距的位置~
image.png155774840.png

image.png155774840.png

然后把这两列的值和我们之前的奖状内容合并~
image.png216985167.png

image.png216985167.png

然后，再把荣誉证书里的多行文本换成html插件，隐藏工具栏，这样就可以随意改变行间距了~是不是很机智~
image.png458714599.png

image.png458714599.png

这样是不是就看着舒服多了~哈哈哈~~~

评分

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

查看全部评分

收藏

回复

9 个回复

倒序浏览

phoben
论坛元老 / 发表于：2022-2-21 21:16:34 推荐

给你个简单方法吧

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

.multiline-text label {
line-height: 35px;
}

复制代码

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

image.png538022155.png

image.png538022155.png

image.png235384520.png

效果：

image.png71814574.png

进阶玩法：
已知，我们利用一句CSS可以改变行距，那么我们就可以多定义几个类

.multiline-text-35 label {
line-height: 35px;
}
.multiline-text-45 label {
line-height: 45px;
}
.multiline-text-55 label {
line-height: 55px;
}
.multiline-text-65 label {
line-height: 65px;
}

复制代码

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

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

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^#

没有大佬解决不了的问题

回复 使用道具举报