haley解决中文字段名称字数不同时两端对齐的问题
2024-05-10 10:20:05
做项目的时候，最恶心的就是字段名称字数不同，比如“姓名”，“公司名”，“手机号码”，类似这样的问题真让人头大。
现在写个jq的插件来解决这个问题。
先上效果图
废话不多说直接贴代码：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi"> <meta name="Author" content="haley"> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style> .container{ width: 90%; margin: 0 auto;; } .con{ border:1px solid #2c44ff; width:28%; float: left; padding:20px; margin:10px; } h2{text-align: center;border-bottom: 3px solid #007aff;margin:20px 10%; padding:20px;} h3{text-align: center;border-bottom: 1px solid #007aff;padding:10px 20px;margin:20px 5%;} .na{ text-align: right; width:11em; display: inline-block; } </style> <title>解决中文字数不同时两端对齐的问题</title></head><body><h2> 2016年12月9日 haley解决中文字数不同对齐问题</h2><section class="container"><div class="con"> <h3>插件控制的效果</h3> <p><span class="nameLs">手机号</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">姓名</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">固定电话</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">中文公司名称</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">邮政编码号</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs">又又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p></div><div class="con"> <h3>插件控制的效果</h3> <p><span class="nameLs2">两字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">三个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">共四个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">一共五个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">我一共六个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">我们一共七个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">我是八个字的标题</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">我就是九个字的标题</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs2">我们才是十个字的标题</span>: <input type="text" placeholder="输入内容"/></p></div><div class="con"> <h3>插件控制的效果</h3> <p><span class="nameLs3">两字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs3">三个字</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="nameLs3">共四个字</span>: <input type="text" placeholder="输入内容"/></p></div> <div class="con"> <h3>普通右对齐的效果</h3> <p><span class="na">手机号</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="na">姓名</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="na">固定电话</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="na">一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="na">又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p> <p><span class="na">又又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p> </div></section><script> (function($){ $.fn.extend({ 'ls':function(){ var arr=[],arrTemp=[],lss=[]; $.each(this,function(){ var elem=$(this); var elemArr=elem.html().split(''); $.each(elemArr,function(n){ arrTemp.push('<span>'+elemArr[n]+'</span>'); }); arr.push(elemArr.length); elem.html(arrTemp.join('')); arrTemp.length=0; }); $.each(arr,function(i){ var max=Math.max.apply(null, arr); lss.push((max-arr[i])/(arr[i]-1)); }); $.each(this,function(i){ $(this).children('span:not(:last)').css({ 'letter-spacing':lss[i]+'em' }); }); } }); })(jQuery);</script><script> var elems=[$('.nameLs'),$('.nameLs2'),$('.nameLs3')];//需要添加自己在这里添加对象名称就行 $.each(elems,function(){ $(this).ls(); });</script></body></html>基本能满足正常需求。
转载于:https://www.cnblogs.com/haley168/p/justify.html
haley解决中文字段名称字数不同时两端对齐的问题相关推荐
- Elasticsearch 8.X 如何优雅的实现字段名称批量修改？
1.线上实战问题 写入es前,数据格式如下 {"json_lbm_01":"test01","json_lbm_02":"test ...
- 解决GeoTools中CQL解析中文字段名的问题
GeoTools中CQL无法解析中文字段名的过滤条件,会报异常错误,经过一个下午的努力,终于通过简单有效的方式解决啦 String filterCondition = "temp='&quo ...
- php mssql扩展SQL查询中文字段名解决方法
一.问题: 数据库是MS SQLServer2000,要把SQLServer2000里的一张表的数据导入MySQL5,其中SQLServer2000表的字段以简体中文命名(强烈建议不要以中文做为字段名 ...
- 解决VO类属性与要返回的json串字段名称不一样的问题
结论:解决VO类属性与要返回的json串字段名称不一样的问题,需要用到@JsonProperty("xxx")这个注解 那具体怎么使用呢?下面我拿我个人的例子来说明. 需要返回的j ...
- mysql字段是问号_Mysql数据库中文字段显示问号怎么解决？
Mysql中文字段显示问号是因为字段的字符集不对,不是utf8.解决方法:使用sql语句"ALTER TABLE 表名 MODIFY 字段名 类型(50) CHARACTER SET &qu ...
- 修改字段名称、替换字符中的英文变中文括号
/修改字段名称 update product set proname= proname+'ef' where proname='清瘟解毒口服液' //替换字符中的英文变中文括号 update prod ...
- wordpress搜索不了中文linux,WordPress上传带中文汉字名称的图片不显示的解决办法...
以上是WordPress上传带中文汉字名称的图片不显示的情况,正常上传成功的话,在上图两个地方都会有图片缩略图显示.相信很多WordPress装载linux系统上的朋友都会遇到这样的错误. WordP ...
- php mysql 中文字段名_php mssql扩展SQL查询中文字段名解决方法
一.问题: 数据库是MS SQLServer2000,要把SQLServer2000里的一张表的数据导入MySQL5,其中SQLServer2000表的字段以简体中文命名(强烈建议不要以中文做为字段名 ...
- mysql表名可以用中文么_[急]MySQL中建表不能使用中文字段吗？解决思路
mysql> set names 'gb2312'; Query OK, 0 rows affected (0.00 sec) mysql> CREATE TABLE 销售小姐(雇员号 I ...
最新文章
- 通过数组名遍历整个数组
- Apache Kafka 不需要管理员：删除 Apache ZooKeeper 的依赖
- lightoj 1037 - Agent 47（状压dp）
- C++primer第九章 顺序容器 9.1 顺序容器概述 9.2容器库概览
- php ioc容器,PHP 在Swoole中使用双IoC容器实现无污染的依赖注入
- VBS基础篇 - Dictionary对象
- centos7 修改时区
- 在没有源代码的情况下调试JAR包..
- html5分镜头脚本范例,(最新整理)分镜头脚本范本
- 云原生CICD:Tekton之TaskTaskRun概念篇
- java 获取区间随机数_Java获取随机数
- bat中if语句的用法
- 全屏抗锯齿技术-FSAA
- 【环信IM集成指南】Android 端常见问题整理
- 十个鲜为人知的Linux命令-【3】
- 外网访问群晖NAS的方法，使用公网助手，怕自己忘记
- Kali Linux下命令行终端的中英文切换
- 企业服务器采用虚拟化技术的利弊
- Android Studio 飞机大战
- iOS开发 导航栏渐变 图片下拉放大 导航栏移动 仿QQ 微博 知乎导航栏