简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:31:23
Original
1929 people have browsed it

CSS如何实现段落首字符缩进两个字符效果:
段落首行第一字符缩进是组织语言的尝试，当然使用空格 也可以实现此效果，不过这样就略显粗傻，下面就介绍一下使用text-indent属性实现此效果，关于text-indent属性可以i参阅CSS的text-indent属性一章节。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> #box{  text-indent:2em;  width:200px;  height:100px;  background-color:green;} </style> </head> <body> <div id="box">蚂蚁部落欢迎您，只有奋斗才会有美好的明天。 </div> </body> </html>
Copy after login

以上代码实现了我们的要求，能够在行首空两个汉字，这里特别注意的是，text-indent属性值的单位是em，这里不多介绍了，具体可以参阅CSS中px和em的区别一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9630

更多内容可以参阅:http://www.softwhy.com/divcss/

Related labels：
CSS如何实现段落首字符缩进两个字符效果
source：php.cn
Previous article：一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose Next article：你对position的了解到底有多少？_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1815
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
1969
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1665
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1568
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1593
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！