求助 为什么我在发表主题前设置好的文字大小、间距和首字缩进在发表以后会不一样？

[fantasy_kb]

如题，昨天晚上到凌晨那段时间我在一般游戏区编辑了一篇自己的推荐文。因为想要方便排版，于是我直接在元素中添加了一段我根据我在网上搜索和坛友建议中修改出的代码

<style>
 p {text-indent:1.8em;line-height: 2;} 
 </style>

好让更加轻松的排版编辑，在编辑过程中也运行的很不错，编辑的内容都有自动排版，但是在编辑完发表以后自己添加的代码却失效了，首行缩进和文字间距全部都消失的。请问这个问题该怎么解决呢？

在发表这个求助中我也用了排版，这里先提前截个图

不知道发表以后会不会恢复正常，如果恢复正常了，那么我该怎样让它跟我编辑时的排版一样呢？请求解答

[攸薩]

于 2023/7/9 于 PM12点13分，fantasy_kb说道:

在编辑过程中也运行的很不错，编辑的内容都有自动排版，但是在编辑完发表以后自己添加的代码却失效了，首行缩进和文字间距全部都消失的。请问这个问题该怎么解决呢？

这个情况我到挺常出现的，编排一些透明度调整也会这样，导致要二度编辑才会保持

有请专业人士

@梦幻妖精

 

====

此贴技术力很强，题主感觉问题已经解决了，有请大大来判定是否锁帖

@箜茗潇  @奥比希金 @苍云静岳  @linjinhai

 

七月 10, 2023，由攸薩修改

[梦幻妖精]

1 小时前，攸薩说道:

这个情况我到挺常出现的，编排一些透明度调整也会这样，导致要二度编辑才会保持

怎么又被使唤！话说攸薩你自己也会的呀！我又不会知道的更多！

论坛本身有禁止一些css代码运行的机制，不是什么都能放的，然后即使是可以运行的代码放进去也莫名其妙会掉，无论是提前写好还是输入框临时修改都一样，没办法的事情，所以重要的项目需要提前写好帖子。

2 小时前，fantasy_kb说道:

<style>
 p {text-indent:1.8em;line-height: 2;} 
 </style>

fantasy的行距2测试结果：行距设置肯定是可行的，隔壁贴测试过了https://sstm.moe/topic/338521-嗯……应该是关于表情包的bug？以及ms-word的粘贴问题……/?do=findComment&comment=16870846

首行缩进也是可行的，使用的代码和上面提到的一致，所以为什么会导致失败？

我猜测可能的原因是fantasy大人使用代码的方式出了问题，这种p {text-indent:1.8em;line-height: 2;} 添加代码的方式是会被论坛规则屏蔽的，我很多年前好像使用过不行，你需要使用style="line-height:2;text-indent: 2em;"这种方式添加样式才行w

[fantasy_kb]

4 小时前，梦幻妖精说道:

怎么又被使唤！话说攸薩你自己也会的呀！我又不会知道的更多！

论坛本身有禁止一些css代码运行的机制，不是什么都能放的，然后即使是可以运行的代码放进去也莫名其妙会掉，无论是提前写好还是输入框临时修改都一样，没办法的事情，所以重要的项目需要提前写好帖子。

fantasy的行距2测试结果：行距设置肯定是可行的，隔壁贴测试过了https://sstm.moe/topic/338521-嗯……应该是关于表情包的bug？以及ms-word的粘贴问题……/?do=findComment&comment=16870846

首行缩进也是可行的，使用的代码和上面提到的一致，所以为什么会导致失败？

我猜测可能的原因是fantasy大人使用代码的方式出了问题，这种p {text-indent:1.8em;line-height: 2;} 添加代码的方式是会被论坛规则屏蔽的，我很多年前好像使用过不行，你需要使用style="line-height:2;text-indent: 2em;"这种方式添加样式才行w

感谢解答，我刚刚去试了一下，确实可以长久发布后依然保存代码，但是只限于我添加的文字前一段。我这里又有一个疑问了，我该怎样让每一段我回车后的文字都自动添加这个代码呢？

[梦幻妖精]

19 分钟前，fantasy_kb说道:

感谢解答，我刚刚去试了一下，确实可以长久发布后依然保存代码，但是只限于我添加的文字前一段。我这里又有一个疑问了，我该怎样让每一段我回车后的文字都自动添加这个代码呢？

其实直接在已经缩进和行距设定好的文本按回车，下一个文本就会自动应用上一行的排版了喔w 

如果想要已经写好的文本再添加样式的话，因为没有便捷的按钮，只能一行一行自己添加代码。。什么的，并不是这样喔w

可以去f12控制台里面运行下面的代码（选择页面所有p元素，并添加首行缩进2字符）：
let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent = '2em'; });

那么整个页面的每一行都会添加好首行缩进啦，不过详细的规则需要懂js语法，有什么不会的可以另外问我喔w

[fantasy_kb]

1 小时前，梦幻妖精说道:

其实直接在已经缩进和行距设定好的文本按回车，下一个文本就会自动应用上一行的排版了喔w 

如果想要已经写好的文本再添加样式的话，因为没有便捷的按钮，只能一行一行自己添加代码。。什么的，并不是这样喔w

可以去f12控制台里面运行下面的代码（选择页面所有p元素，并添加首行缩进2字符）：
let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent = '2em'; });

那么整个页面的每一行都会添加好首行缩进啦，不过详细的规则需要懂js语法，有什么不会的可以另外问我喔w

阿里嘎多梦羊羊桑

 

1 小时前，梦幻妖精说道:

其实直接在已经缩进和行距设定好的文本按回车，下一个文本就会自动应用上一行的排版了喔w

这个非常实用，下次我就这样子用

1 小时前，梦幻妖精说道:

可以去f12控制台里面运行下面的代码（选择页面所有p元素，并添加首行缩进2字符）：
let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent = '2em'; });

这个有点不太懂，等我去琢磨琢磨，对这个没啥经验，但是如果需要到这个功能我会去尝试一下的

[梦幻妖精]

8 分钟前，fantasy_kb说道:

阿里嘎多梦羊羊桑

 

这个非常实用，下次我就这样子用

这个有点不太懂，等我去琢磨琢磨，对这个没啥经验，但是如果需要到这个功能我会去尝试一下的

我随时都可以问喔，有什么问题尽管来吧~ 

后面的代码稍微有些超纲了，需要的话我可以根据要求定制给你w

另外你可以猜猜你的铭牌是以谁的名字作为启发的w（bushi

[fantasy_kb]

54 分钟前，梦幻妖精说道:

我随时都可以问喔，有什么问题尽管来吧~ 

后面的代码稍微有些超纲了，需要的话我可以根据要求定制给你w

另外你可以猜猜你的铭牌是以谁的名字作为启发的w（bushi

谢谢梦羊羊，你后边说的那个操作我去拿我之前发的帖试了一下，真的可行。你说的很简单易懂，我一试就成功了，你很有当老师的潜质

但是我在尝试过程中又出现了新的问题，我试着稍微修改了一下你给的代码发现只能生效最前边的一个

let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent='2em';.lineheight= '2'.fontsize = '20px'; });

结果生成的效果好像是

let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent= '20px'; });

请问我要怎样让三个同时生效呢？

 

[梦幻妖精]

26 分钟前，fantasy_kb说道:

let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent='2em';.lineheight= '2'.fontsize = '20px'; });

其实只差临门一脚喔！首先每个效果之间要加;分开，然后每个效果都要写成“p.style.xxx”这种样式 

然后使用这个代码运行的话也是要不同的效果名字的，而不是写在网页上的效果名，如果觉得不够直观的话可以使用这个：

let pElements = document.querySelectorAll('p');

pElements.forEach((p) => {
    p.style.cssText = 'text-indent: 2em; line-height: 2; font-size: 20px;';
});
直接替换所有p元素内的style里面的文字为text-indent: 2em; line-height: 2; font-size: 20px;而不是添加效果，会导致有些行的文字原本的效果消失。

如果要继续用刚刚的代码的话，则是如下，添加效果，而不替换原本的效果：

let pElements = document.querySelectorAll('p'); 

pElements.forEach((p) => { 
    p.style.textIndent = '2em';
    p.style.lineHeight = '2'; 
    p.style.fontSize = '20px'; 
});
 

[fantasy_kb]

21 分钟前，梦幻妖精说道:

其实只差临门一脚喔！首先每个效果之间要加;分开，然后每个效果都要写成“p.style.xxx”这种样式 

然后使用这个代码运行的话也是要不同的效果名字的，而不是写在网页上的效果名，如果觉得不够直观的话可以使用这个：

let pElements = document.querySelectorAll('p');

pElements.forEach((p) => {
    p.style.cssText = 'text-indent: 2em; line-height: 2; font-size: 20px;';
});
直接替换所有p元素内的style里面的文字为text-indent: 2em; line-height: 2; font-size: 20px;而不是添加效果，会导致有些行的文字原本的效果消失。

如果要继续用刚刚的代码的话，则是如下，添加效果，而不替换原本的效果：

let pElements = document.querySelectorAll('p'); 

pElements.forEach((p) => { 
    p.style.textIndent = '2em';
    p.style.lineHeight = '2'; 
    p.style.fontSize = '20px'; 
});
 

谢谢，我学会了！！！

其实第一次我也尝试过这样去改，但是失效了，看了你发的代码我知道为什么了，因为我是这样

let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent = '1.8em';p.style.lineHeight = '2'; p.style.fontSize = '18px'; });

而梦老师是这样

let pElements = document.querySelectorAll('p'); 

pElements.forEach((p) => { 
    p.style.textIndent = '2em';
    p.style.lineHeight = '2'; 
    p.style.fontSize = '20px'; 
});

我把每一个p的前边加了个. 导致整个代码直接失效，然后我以为这是错的所以去试到后边那种方法了

而现在当我把.去掉变成

let pElements = document.querySelectorAll('p'); pElements.forEach((p) => { p.style.textIndent = '1.8em';p.style.lineHeight = '2'; p.style.fontSize = '18px'; });

时，这一项又被完美的运行了。

这下我算是明白了，谢谢梦老师，这下以后我长文帖排版就会更加轻松啦

[梦幻妖精]

20 分钟前，fantasy_kb说道:

这下我算是明白了，谢谢梦老师，这下以后我长文帖排版就会更加轻松啦

一般来说叫我妖精才对啦！

为什么要叫梦老师ww

最好这方面不要自己琢磨哟，要用的话要去看相关文档直接找比较好喔！毕竟很多没有规律什么的w

https://www.runoob.com/js/js-examples.html

[fantasy_kb]

49 分钟前，梦幻妖精说道:

一般来说叫我妖精才对啦！

为什么要叫梦老师ww

最好这方面不要自己琢磨哟，要用的话要去看相关文档直接找比较好喔！毕竟很多没有规律什么的w

https://www.runoob.com/js/js-examples.html

好的梦老师，我知道啦

宝藏网站已收藏，其实我自己曾经也为发布好帖而去搜索相关知识呢

比如为了了解能不能在帖中插入视频，我了解到了HTML 视频 (w3school.com.cn)

然后我就插入成功了，然后我还发现如果我插入音频的时候用的不是video而是audio，那么音频虽然有图标但是无法播放。

一切都很神奇，为了赚节操真是需要多多学习