小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

如何在WordPress中轻松缩进段落

可视化,css,wordpress,java,html 额外说明

收录于:15天前

您想在 WordPress 中添加空格或缩进段落吗?虽然大部分文本都是左对齐的,但在某些情况下,您可能需要缩进段落以改进排版和更好的阅读体验。在本文中,我们将向您展示如何在 WordPress 中轻松缩进段落。

您想在 WordPress 中添加空格或缩进段落吗?虽然大部分文本都是左对齐的,但在某些情况下,您可能需要缩进段落以改进字体和更好的阅读体验。在本文中,我们将向您展示如何在 WordPress 中轻松缩进段落。

How to indent paragraphs in WordPress
方法1:在Visual编辑器中使用缩进文本按钮 Method 1: Using The Indent Text Buttons in Visual Editor

By default, most WordPress 主题 will show paragraphs justified to the left or to the right for right to left languages.

默认情况下,大多数WordPress 主题将在左右两边显示从右至左对齐的段落。

If you want to indent a paragraph, then you can do that manually by clicking on the increase indent button in the 可视化编辑器. This will add spacing to the left of paragraph.

如果要缩进一个段落,则可以通过单击在可视化编辑器中的增加缩进按钮来手动完成。 这将在段落的左侧增加间距。

Increase indent and decrease indent buttons in WordPress editor

如果您想要缩进多个段落,则需要选择这些段落,然后单击增加缩进按钮。

如果要缩进多个段落,则需要选择这些段落并单击“增加缩进”按钮。

您可以多次单击添加缩进以增加间距。例如,如果您单击它两次,那么缩进间距就会加倍。

您可以多次单击“添加缩进”以增加间距。例如,如果单击两次,缩进间距将加倍。

您还可以通过单击减少缩进按钮来减少间距。

您还可以通过单击减少缩进按钮来减少间距。

方法2:使用文本编辑器手动缩进段落 Method 2: Indent Paragraph Manually Using Text Editor

使用可视化编辑器中的缩进文本按钮是在 WordPress 中缩进段落的最简单方法。但是,这不允许您控制要添加的间距量。

使用可视化编辑器中的“缩进文本”按钮是在 WordPress 中缩进段落的最简单方法。但是,这不允许您控制要添加的间距量。

More advanced users can switch to the 文本编辑器 and manually add spacing. All you need to do is to wrap the text around paragraph tag <p> and </p> tags and then add inline CSS to the paragraph text like this:

更高级的用户可以切换到文本编辑器并手动添加间距。 您所需要做的就是将文字包裹在段落标签<p>和</ p>标签周围,然后将内嵌CSS添加到段落文本中,如下所示:

<p style="padding-left:25px;">Your paragraph text goes here...</p>

<p style="padding-left:25px;">Your paragraph text goes here...</p>

Manually indent paragraphs using inline CSS

此方法允许您控制要用作缩进的间距。如果您不需要经常缩进段落,则此方法效果最佳。但是,如果您经常缩进段落,那么这不是一个理想的解决方案。

此方法允许您控制用作缩进的间距。如果您不需要频繁缩进段落,则此方法效果最佳。但是,如果您经常缩进段落,这不是一个理想的解决方案。

方法3:仅缩进段落的第一行 Method 3: Indent Only The First Line of a Paragraph

网页不使用文字处理程序或排版所使用的传统段落间距,后者仅缩进段落的第一行。

网页不使用文字处理程序或排版所使用的传统段落间距,而仅缩进段落的第一行。

即使在 WordPress 中,当您缩进段落时,间距也会添加到整个段落中。

即使在 WordPress 中,当您缩进段落时,空格也会添加到整个段落中。

All lines get affected in indent paragraph

Some websites like news, magazine sites, or literary journals may want to add a more traditional paragraph spacing. In that case, you will need to add 自定义CSS to your theme.

一些网站,例如新闻,杂志网站或文学期刊,可能希望添加更传统的段落间距。 在这种情况下,您将需要在主题中添加自定义CSS

First you need to visit 外观 » 定制 to launch WordPress theme customizer. Now click on the ‘Additional CSS’ tab.

首先,您需要访问外观»定制以启动WordPress主题定制器。 现在,点击“其他CSS”标签。

Adding custom CSS in WordPress

这将在左侧窗格中显示一个文本框,您可以在其中添加自定义 CSS。您需要在框中添加此 CSS 代码。

这将在左侧窗格中显示一个文本框,您可以在其中添加自定义 CSS。您需要在框中添加此 CSS 代码。


p.custom-indent { 
text-indent:60px;
} 

此 CSS 代码只是告诉浏览器,如果一个段落具有 .custom-indent 类,则添加 60px 作为文本缩进。

这段 CSS 代码只是告诉浏览器,如果一个段落有 .custom-indent 类,则添加 60px 作为文本缩进。

您现在可以在 WordPress 中编辑帖子并切换到文本编辑器。接下来,将段落包含在 <p class="custom-indent"> 和 </p> 标记内,如下所示:

您现在可以在 WordPress 中编辑帖子,然后切换到文本编辑器。接下来,将段落包装在 <p class="custom-indent"> 和 </p> 标记内,如下所示:

<p class="custom-indent">Your paragraph text goes here...</p>

<p class="custom-indent">Your paragraph text goes here...</p>

完成后,您可以预览您的帖子,您将看到只有段落的第一行前面有空格。

完成后,您可以预览帖子,您会看到段落第一行之前只有空格。

Indent only the first line of a paragraph in WordPress

如果您只想缩进几个段落,则此方法会很有效。但是,如果您想将此样式添加到网站上的所有段落,那么您只需更改自定义 CSS,如下所示:

如果您只想缩进几个段落,则此方法非常有效。但是,如果您想将此样式添加到网站上的所有段落,您只需更改自定义 CSS,如下所示:


article p { 
text-indent:60px;
} 

This CSS rule will automatically indent the first line of all paragraphs inside a WordPress 帖子或页面.

此CSS规则将自动缩进WordPress 帖子或页面中所有段落的第一行。

We hope this article helped you learn how to indent paragraphs in WordPress. You may also want to see our tips on 掌握 WordPress 可视化编辑器.

我们希望本文能帮助您学习如何缩进WordPress中的段落。 您可能还想查看有关掌握 WordPress 可视化编辑器提示。

If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特Facebook上找到我们。

翻译自: https://www.wpbeginner.com/beginners-guide/how-to-easily-indent-paragraphs-in-wordpress/

. . .

相关推荐

额外说明

Docker构建jar包/vue镜像并发布

1、maven 对项目进行jar/war打包: 如:my-notepad-service-1.006.jar 2、构建镜像: 新建Dockerfile内容有: FROM openjdk:8-jdk-alpine # 作者 MAINTAINER Yang

额外说明

Redis(8)——SortedSet有序集合类型

文章目录 前言 追加有序集合(zadd) 取出有序集合中的`元素`(zrange) 删除集合数据(zrem) 数据增长(zincrby) 删除指定集合(del) 返回元素所在集合的`索引`(zrank) 反转数据,取得`索引`(zrevrank) 反转操

额外说明

zookeeper数据模型基本操作

                        [root@localhost bin]# clear [root@localhost bin]# ./zkCli.sh   [zk: localhost:2181(CONNECTED) 7] ls /zo

额外说明

二十分钟将带您完成 JVM 性能调优和实际改进

ZGC 诞生原因 Java生态非常强大,但还不够,有些场景仍处于劣势,而ZGC的出现可以让Java语言抢占其他语言的某些特定领域市场。比如 谷歌主导的Android手机系统显示卡顿。 证券交易市场,实时性要求非常高,目前主要是C++主导。 大数据集群如H

额外说明

【STM32基础 CubeMX】PWM输出

文章目录 前言 一、PWM是什么? 二、CubeMX配置PWM 三、代码分析 3.1 CubeMX生成代码 3.2 PWM的几个库函数 HAL_TIM_PWM_Start 3.3 PWM回调函数 3.4 占空比 占空比是什么 __HAL_TIM_SET_

额外说明

vue中处理并发请求

需求:同时获取多个接口下拉数据 类似与这样的 接口封装,可根据自己封装方法 // 获取角色 export const getPersonnelByRole = (role = { }) => { return request({ url:

额外说明

初学者做APP所需工具安装及ionic-app-scripts has unexpectedly closed问题

最近在做一个项目,要求是后台管理员为web端,用户 为APP端,之前只是看过《第一行代码》的一些内容,并没有实际做项目来应用,现在更是忘了,今天打算记录一下初学者做APP项目需要准备的开发工具和安装教程。 先给大家推荐一篇博客,偶然间发现,有点学习网站大

额外说明

安卓讲课笔记(9):列表视图

安卓讲课笔记(9):列表视图 上次课我们通过“设置基本信息”案例,讲解了单选按钮与复选框的常用属性以及用法。单选按钮与复选框最关键的方法是 isChecked() ,根据该方法返回值确定项目是否被选中。还可以利用setChecked()方法来设置单选按钮

额外说明

详解javaScript的事件中,复杂数据类型的传参(数组,对象,函数)

文章目录 前言 一、何谓预编译,变量提升? 二、复杂数据类型的传递 1.数组 2.对象 3.函数 总结   前言 在JavaScript这门编程语言学习中,有太多关键问题,比如如何传参,什么是变量提升,js代码预编译是怎么回事等等。要想成为一名优秀的js

额外说明

Chris Brogan和Guy Kawasaki的Google Plus for Business

This was the first session at 博客世界 LA 2011. So we all know Google+ is out with a buzz. Btw: 在 Google+ 上关注我. It was a full house

ads via 小工具