巧用css text-indent减小中文标点符号的占位大小

由于设计需要，我们的页面中经常会有如下效果：

可是我们实现出来的效果确实这样的：

看起来两行文本没有对齐嘛，仔细检查后原来是【字符的原因，因为是中文标点符号占半个字的位置。不信？选中下汉字标点符号看一下即可。至于为什么会占半个字的位置，个人觉得可能是为了方便排版，标点符号也要占一个汉字的空间（想想小时候写的作文标点符号是不是都占一格）。标点符号相对于格子左对齐，所以自然一侧留下一半空间。具体原因求科普！查明原因即对症下药，既然中文标点符号占汉字半个位置，那么我们使用CSStext-indent：-.5em;样式修改即可。修改后的效果如下图所示：

text-indent：CSS1版本属性，规定文本块中首行文本的缩进。允许使用负值。如果使用负值，那么首行会被缩进到左边。可使用指定长度或百分比和inherit，任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

em ：CSS3相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

除了上述的使用，那么text-indent还有什么妙用呢？

首行缩进两字符：text-indent：2em;
隐藏字符：text-indent: -999em;
更多玩法，等你发掘

扩展链接：

CSS text-indent属性
[text-indent:-9999px 字体隐藏问题

转载于:https://www.cnblogs.com/cjlll/p/6295644.html

巧用css text-indent减小中文标点符号的占位大小相关推荐

php 正则匹配中文标点,JavaScript_js实现正则匹配中文标点符号的方法，本文实例讲述了js正则匹配中 - phpStudy...
js实现正则匹配中文标点符号的方法本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: js正则匹配中文标点符号 function ch ...
php正则匹配标点符号,js实现正则匹配中文标点符号的方法
本文实例讲述了js正则匹配中文标点符号的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: js正则匹配中文标点符号 function checkText() { var te ...
【知识】正则表达式匹配中文标点符号
正则表达式匹配中文标点符号 function checkText() {var text = ",";//匹配这些中文标点符号 . ? ! , . : : " " ...
Android的TextView在显示文字的时候，如果有段中文有英文，有中文，有中文标点符号，你会发现，当要换行的时候遇到中文标点，这一行就会空出很多空格出来...
一.问题描述: Android的TextView在显示文字的时候,如果有段中文有英文,有中文,有中文标点符号,你会发现,当要换行的时候遇到中文标点, 这一行就会空出很多空格出来.原因是: 1) Tex ...
Python正则表达式和re模块，完美匹配中文与中文标点符号
正则表达式和re模块世界上分两种人,一种是懂正则表达式的,一种是不懂正则表达式的. https://darlewo.cn/getting_started_with_crawler_advanced_ ...
php 过滤英文标点符号过滤中文标点符号
php 过滤英文标点符号过滤中文标点符号代码 function filter_mark($text){if(trim($text)=='')return '';$text=preg_replace ...
php去除英文和标点,php实现过滤中文标点符号及过滤英文标点符号的示例代码
php实现过滤中文标点符号及过滤英文标点符号的示例代码分类:PHP_Python| 发布:佚名| 查看: | 发表时间:2014/8/18 php 过滤英文标点符号过滤中文标点符号代码代码如下 ...
CSS Text Decoration
大家很熟悉的 CSS2 用法 text-decoration ,到了 CSS3 就拥有很多新的特性.本文将介绍 Level 4 中最新添加的特性. CSS Text Decoration 文字修饰线: ...
巧用css技巧实现三角符号
<html> <head> <title>巧用css技巧实现三角符号</title> <style type="text/css&quo ...

巧用css text-indent减小中文标点符号的占位大小

巧用css text-indent减小中文标点符号的占位大小相关推荐

最新文章

热门文章