css英文左右对齐,中文英文左右padding一致两端对齐实现_js
先看下图:
就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能够好看一点,右边要对齐。
其实呢,要实现两端对齐很简单,使用text-align:justify, 之前有写过“display:inline-block/text-align:justify下列表的两端对齐布局”,也是属于text-align:justify的精彩应用;然后配合其他一些小技巧,就能实现任意中英文的两端对齐排列效果了。
您可以狠狠地点击这里:中文或英文两端对齐Demo
我们可以看到,demo页面上有一段朴实的文字:
然后我们点击按钮变身一下,会发现,文字内容乖乖两端对齐了:
这种对齐效果,IE6/IE7浏览器也是支持良好的,例如,下面这个IE7下的截图:
实现原理
要理解原理,我们首先要搞清楚文本的两端对齐声明text-align:justify起作用的本质。首先,大家要知道,text-align:justify是专门为英文设计的,谁叫css是老外发明的呢,用来实现英文语句的两端对齐。注意这里的,是语句的对齐。大家应该都知道,英文语句是一个单词一个单词组合而成的,每个单词之前使用空格分隔。
text-align:justify之所以可以让英文段落两端对齐,那是因为每个英文单词之前那个透明看不见的空格被拉伸了。注意,是空格被拉伸了,对,只有空格。因此,当我们写下一段洋洋洒洒中文内容的时候,text-align:justify是没有任何作用的,跟没设置没任何区别。为什么呢?很简单,因为中文是一个一个汉字,汉字之间是没有空格的,自然也就不能拉伸,自然也就不能两端对齐。
怎么办呢?难道中文就不行了吗?
当然不是!既然正常的中文文字之间没有空格,我们自己加一点不就好了。例如下面代码:
"宁泽涛小鲜肉".split("").join(" ");
结果就是:
会发现,每个中文文字之间都有的空格字符,于是,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
css英文左右对齐,中文英文左右padding一致两端对齐实现_js相关推荐
- 两端分散对齐怎么设置_Word文档两端对齐.分散对齐如何设置
Word文档两端对齐.分散对齐如何设置 在Word文档排版中有许多细节和技巧都需要我们去掌握熟知,只有这样我们才可以在日常生活中快速的完成工作.今天小编要为大家介绍的是Word两端对齐与分散对齐功能. ...
- 两端分散对齐怎么设置_Word文档两端对齐分散对齐有哪些设置方法
在Word文档排版中有许多细节和设置技巧都需要我们去掌握,只有这样才能在日常生活中快速帮助我们完成工作.以下是学习啦小编为您带来的关于Word文档两端对齐.分散对齐设置方法,希望对您有所帮助. Wor ...
- html 不同字数对齐,表单短标题不同字数两端对齐问题
方法一:利用letter-spacing属性和em html 热门搜索电视机性感漂亮高跟鞋手机对齐牛仔裤小家碧玉家居 css .hotsearch dd{ float: left; line-heig ...
- css+js解决文本两端对齐以及分散对齐
一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式. 这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐. 最开始的时候 ,我试图使用CSS来解决这个小问题, ...
- 两端文字对齐css,css两端对齐怎么设置,css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
- chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
- css 文字两端对齐
1.需求是这样的:用div+css实现一个表单,要求表单中,输入框前面的label文字都两端对齐,效果如下: 2.先贴出html代码: <div class="item-box&quo ...
- 两端对齐的CSS怎么写?
在设计页面的时候会涉及到文本对齐的问题,默认情况下是靠左对齐的,但有些时候也乤靠右对齐.本文给大家介绍下css两端对齐,看看css两端对齐怎么设置,以及css中文本的对齐有哪些. 一.css两端对齐怎 ...
- 表单短标题(2、3、4个字)的两端对齐- HTML + CSS
原文:https://blog.csdn.net/muyutingfeng2008/article/details/48263073 更改后 <style type="text/css ...
最新文章
- LAMP 啟動 WWW 服務與測試 PHP 模組
- php 函数返回多个值
- 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(七)
- 信息学奥赛一本通(C++)在线评测系统——基础(三)数据结构 —— 1363:小球(drop)
- ROS通信架构(下)
- C#/.Net Core/WPF框架初建(国际化、主题色)
- django之auth模块
- 转:一个较完整的关键字过滤解决方案
- [转载] 详解 Numpy.ndarray
- 用 Python 写一个简单的Web框架
- ddr4 dqs 频率_ddr4
- ​【火星传媒报道】李笑来归来:不做韭菜的生意
- 如何为Safari浏览器安装Flash插件?
- Typo: In word xxxx
- 砺鹰教育之四川财经职业学院讲座——我为什么选择创业?
- 《从零开始搭建游戏服务器》Linux开发环境配置
- leetcode 5473-灯泡开关4
- Service START_NOT_STICKY、START_STICKY
- Scratch官方教程中文版(2)——制作可交互的生日贺卡
- JS---event事件