css英文左右对齐,中文英文左右padding一致两端对齐实现_js

先看下图:

b4913314d7e86bce285e7b9184695a29.png

就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能够好看一点,右边要对齐。

其实呢,要实现两端对齐很简单,使用text-align:justify, 之前有写过“display:inline-block/text-align:justify下列表的两端对齐布局”,也是属于text-align:justify的精彩应用;然后配合其他一些小技巧,就能实现任意中英文的两端对齐排列效果了。

您可以狠狠地点击这里:中文或英文两端对齐Demo

我们可以看到,demo页面上有一段朴实的文字:

75958cd4a9f00f60f9b834bcb5e5e92c.png

然后我们点击按钮变身一下,会发现,文字内容乖乖两端对齐了:

2566d5a77b410f6bfc5b5319070d502f.png

这种对齐效果,IE6/IE7浏览器也是支持良好的,例如,下面这个IE7下的截图:

c01e63221f854e9ac7d4d4130c35f4f1.png

实现原理

要理解原理,我们首先要搞清楚文本的两端对齐声明text-align:justify起作用的本质。首先,大家要知道,text-align:justify是专门为英文设计的,谁叫css是老外发明的呢,用来实现英文语句的两端对齐。注意这里的,是语句的对齐。大家应该都知道,英文语句是一个单词一个单词组合而成的,每个单词之前使用空格分隔。

text-align:justify之所以可以让英文段落两端对齐,那是因为每个英文单词之前那个透明看不见的空格被拉伸了。注意,是空格被拉伸了,对,只有空格。因此,当我们写下一段洋洋洒洒中文内容的时候,text-align:justify是没有任何作用的,跟没设置没任何区别。为什么呢?很简单,因为中文是一个一个汉字,汉字之间是没有空格的,自然也就不能拉伸,自然也就不能两端对齐。

怎么办呢?难道中文就不行了吗?

当然不是!既然正常的中文文字之间没有空格,我们自己加一点不就好了。例如下面代码:

"宁泽涛小鲜肉".split("").join(" ");

结果就是:

974c57efe23cced4deb2dbe6e3c66050.png

会发现,每个中文文字之间都有的空格字符,于是,text-align:justify就能大发神威,实现两端对齐!

OK,现在两端对齐是实现了,但是,空格字符它也是真实存在的字符,是会占据宽度的。如果放任不管,文字就会太稀松,阅读很吃力,会被当bug提出来的,怎么办呢?

很简单,我们使用letter-spacing收缩字符间距就可以了。例如demo页面:

box.style.letterSpacing = "-.15em";

不同字体的letter-spacing负值不一样,使用em单位呢,可以更智能适配各个font-size的文字。demo使用的微软雅黑字体,我大致测试了下,-.15em是个挺合适的值,其他字体我就不详了,你有兴趣,可以自己捣腾下。

至此,我们的任意中文英文的两端对齐效果就实现了。

使用js再总结下就是(假设box是文字容器元素):

ox.style.textAlign = "justify"; box.style.letterSpacing = "-.15em"; box.innerHTML = box.innerHTML.split("").join(" ");

寥寥3行代码,我们就大功告成了!

补充于翌日:

上面的方法适用于中文内容,如果段落含有英文片段,会干掉原来的空格,因为三个空格会被当做一个空格距离处理,因此,我们还需要对连续3个空格左下特殊处理,因此代码进化成:

box.innerHTML = box.innerHTML.replace(/^[/s/uFEFF/xA0]+[/s/uFEFF/xA0]+$/g, "").split("").join(" ").replace(//s{3}/g, "   ");

欢迎大家阅读《中文英文左右padding一致两端对齐实现_js》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接:中文英文左右padding一致两端对齐实现_js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472330.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python判断字符类型编程_Python检测数据类型的方法总结

我们在用python进行程序开发的时候,很多时候我们需要检测一下当前的变量的数据类型。比如需要在使用字符串操作函数之前先检测一下当前变量是否是字符串。下面小编给大家分享一下在python中如何检测数据类型 首先我们打开CMD控制台,进入到python环境&…

RDD 编程

文章目录1. RDD 创建2. RDD转换3. RDD动作4. 持久化5. 分区6. 文件数据读写6.1 本地6.2 hdfs6.3 Json文件6.4 Hbase学习自 MOOC Spark编程基础1. RDD 创建 从文件创建 Welcome to____ __/ __/__ ___ _____/ /___\ \/ _ \/ _ / __/ _//___/ .__/\_,_/_/ /_/\_…

centos 限制只能访问某个目录的php文件

vi /etc/php.ini #编辑 open_basedir .:/tmp/ #在380行 设置表示允许访问当前目录(即PHP脚本文件所在之目录)和/tmp/目录,可以防止php木马跨站,如果改了之后安装程序有问题(例如:织梦内容管理系统),可以注销此行, 或者直接写上程序的目录/da…

python saltstack web_saltstack web uiweb平台界面

拾壹015/04/2016 下午 3:254楼2016-04-15 15:18:15,632 [cherrypy.error ][ERROR ][10998] [15/Apr/2016:15:18:15] ENGINE TypeError(“argument of type ‘NoneType’ is not iterable”,)Traceback (most recent call last):File “/usr/lib/python2.6/site-packages/cherry…

楼宇自控ba系统 服务器,楼宇自控BA系统

1、系统介绍楼宇自控系统 (Building Automation System) 针对楼宇内各种机电设备进行集中管理和监控。楼宇控制系统主要包括空调新风机组、送排风机、集水坑与排水泵、电梯、变配电、照明等。在整个楼宇范围内,通过整套楼宇自动控制系统及其内置最优化控制程序和预设…

用python解决生活问题_Python解决生活问题之闹钟程序的实现

昨天下班回家忘了带手机充电器,手机熄火没闹钟了,可现实是迟到30分钟以内要罚100RMB,超过30分钟算旷工要扣除3天工资,想想这代价,好吧,还是自己动手写一个闹钟程序吧! 系统环境: Lin…

推荐系统可利用的特征

学自 极客时间 《深度学习推荐系统实战》 推荐系统就是利用“用户信息”,“物品信息”,“场景信息”这三大部分有价值数据,通过构建推荐模型得出推荐列表的工程系统 特征其实是对某个行为过程相关信息的抽象表达 构建特征原则:尽…

搭建git服务器

在远程仓库一节中,我们讲了远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改。 GitHub就是一个免费托管开源代码的远程仓库。但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给GitHu…

回拨系统服务器,CISCO接入服务器回拨功能的实现

很多人都在实践中配置过CISCO的接入服务器,象2511、2620或者是5300。接入服务器提供了廉价的通过电话拨号远程访问企业网的方式。但是接入服务器提供的回拨功能却很少有人用到。回拨的过程是用户拨通接入服务器,输入用户名/密码,通过认证后&a…

python3时间戳转换成时间_Python3 日期与时间戳相互转换

开发中经常会对时间格式处理,对于时间数据,比如2019-02-28 10:23:29,有时需要日期与时间戳进行相互转换,在Python3中主要用到time模块,相关的函数如下:其中unix_time函数是正常时间转unix时间戳&#xff0c…

iis无法读取配置文件_SpringBoot 有很多读取配置文件的方法,你知道几个? 静态方法读取呢?...

SpringBoot 如何在静态方法中读取配置文件的值在Spring中呢有很多读取配置文件值的相关注解,读取这些配置文件都是依赖于Spring的方式。我发现的读取配置文件的方式有好几种。1、Value 注解2、ConfigurationProperties 和 EnableConfigurationProperties(Compent&am…

LeetCode 1837. K 进制表示下的各位数字总和

文章目录1. 题目2. 解题1. 题目 给你一个整数 n(10 进制)和一个基数 k ,请你将 n 从 10 进制表示转换为 k 进制表示,计算并返回转换后各位数字的 总和 。 转换后,各位数字应当视作是 10 进制数字,且它们的…

ajax 请求svg,jQuery append 到AJAX加载的SVG问题

我已成功通过AJAX从外部文件加载了一些svg:$("#svg").load(svgUrl " svg", function() {// do stuff});我的HTML看起来像这样:...我可以看到图形很好。现在,我想向已加载的svg添加一些其他svg元素。我将脚本更改为:$("#svg").load(s…

微信开发学习日记(一):快速阅读5本书,掌握整体背景

2015年1月开始学习微信开发。已经有多年开发经验了,从网上文章来看,微信开发主要是接口,然后是业务逻辑,不是很难。所以,我比较强调学习效率。一天学一点,是不能满足我的快速学习欲望的。在京东上&#xff…

python json序列化对象_Python学习之json序列化

一、什么是序列化在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据格式。这个过程叫序列化,不同的序列化结果也不同,但目的是一样的,都是为了存储和传输在Python中三…

c语言中把一个数缩小十倍_C语言实例第04期,在控制台打印出著名的杨辉三角...

点击上方“C语言中文社区”,选择“设为星标★”技术干货第一时间送达!往期回顾:C语言实例第01期,十进制数转换二进制数C语言实例第02期,判断某一年是否为闰年C语言实例第03期,使用*打印平行四边形实例代码/…

LeetCode 1838. 最高频元素的频数(二分查找)

文章目录1. 题目2. 解题1. 题目 元素的 频数 是该元素在一个数组中出现的次数。 给你一个整数数组 nums 和一个整数 k 。 在一步操作中,你可以选择 nums 的一个下标,并将该下标对应元素的值增加 1 。 执行最多 k 次操作后,返回数组中最高频…

wafer小程序服务器,Wafer - 企业级微信小程序全栈方案

Wafer 服务端 SDK - C#本项目是 Wafer 组成部分,以 SDK 的形式为业务服务器提供以下服务:SDK 获取本项目遵守 MIT 协议,可以直接下载 SDK 源码进行修改、编译和发布。如果使用自动部署并选择 C# 语言,则分配的业务服务器里已经部署…

Android学习按键事件监听与Command模式

Android学习按键事件监听与Command模式 - Dufresne - 博客园 Android学习按键事件监听与Command模式 一 Command模式 意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化; 对请求排队或记录请求日志,以及支持…

postek二次开发_20190626_二次开发BarTender打印机_C#代码_一边读取TID_一边打印_打印机POSTEK...

demo代码如下:private void btnPrint_Click(object sender, EventArgs e){if (this.btnPrint.Text "停止打印"){SetBtnPrintUIEnable();return;}//禁用界面上的相关按钮SetBtnPrintUIDisable();var dt new DataTable();new Task(() >{///开始的打印//1. 获取选中…