haley解决中文字段名称字数不同时两端对齐的问题

做项目的时候,最恶心的就是字段名称字数不同,比如“姓名”,“公司名”,“手机号码”,类似这样的问题真让人头大。

现在写个jq的方法来解决这个问题。

先上效果图

现在贴代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
 6     <meta name="Author" content="haley">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
10     <title>解决中文字数不同对齐问题</title>
11 </head>
12 <body>
13 <h2>
14     2016年12月9日 haley解决中文字数不同对齐问题
15 </h2>
16 <div style="padding-left:30px;width:290px;">
17     <p class="nameLs">手机号</p>
18     <p class="nameLs">姓名</p>
19     <p class="nameLs">固定电话</p>
20     <p class="nameLs">中文公司名称</p>
21     <p class="nameLs">邮政编码号</p>
22     <p class="nameLs">一个特殊字段名称</p>
23     <p class="nameLs">又一个特殊字段名称</p>
24     <p class="nameLs">又又一个特殊字段名称</p>
25 </div>
26 <script>
27     (function($){
28         $.fn.extend({
29             ‘ls‘:function(){
30                 var arr=[];
31                 $.each(this,function(){
32                     arr.push($(this).html().split(‘‘).length);
33                 });
34                 console.log(arr);
35                 $.each(this,function(){
36                     var max=Math.max.apply(null, arr);
37                     var n=$(this).html().split(‘‘).length;
38                     console.log("max:"+max);
39                     var ls=(max-n)/(n-1);
40                     $(this).css({
41                         ‘letter-spacing‘:ls+‘em‘
42                     });
43                 });
44
45             }
46         });
47     })(jQuery);
48     $(‘.nameLs‘).ls();
49 </script>
50 </body>
51 </html>

基本能满足正常需求。但是还有一点小bug,就是右侧占位比较多,需要调节一下。

时间: 2024-12-16 12:58:56

haley解决中文字段名称字数不同时两端对齐的问题的相关文章

SqlBulkCopy excel 字段映射解决办法二 使用数字索引代替 字段名称 做映射 避免字段中有中文 大小写等情况

多线程的SqlBulkCopy批量导入.事务和SqlBulkCopy使用的数据集中自定义映射字段的注意事项 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

mysql5.6插入中文字段报错解决

使用环境:1.centos6.72.mysql5.63.虚拟机VMware? Workstation 12 Pro (12.5.9 build-7535481)4.SecureCRT Version 6.2.0 (build 195) 问题症状: 检查步骤:1.在mysql里输入命令,show create table tanzhou;(根据自己表名称填写,这里是tanzhou)当前编码错误,图片显示CHARSET=latin1,应为UTF-8.2.在mysql查看编码,show variabl

DELPHI7调用BERLIN中间件的中文字段名乱码的解决办法

MSSQL数据库的表使用中文字段名,BERLIN开发的DATASNAP中间件,DELPHI7调用中间件的查询方法返回数据给CLIENTDATASET.DATA,发现中文字段名乱码,中文字段名的值可以正常显示. 怎么办? 发现在SQL语句中将中文字段名as 为英文字段名可以解决乱码的问题. select c1,字段名2 as c1 from t1 原因何在? BERLIN默认是使用UNICODE字符串的,BERLIN的CLIENTDATASET也是使用UNICODE字符串,而DELPHI7是ANS

【原创】通俗易懂地解决中文乱码问题(2) --- 分析解决Mysql插入移动端表情符报错 ‘incorrect string value: &#39;\xF0...

这篇blog重点在解决问题,如果你对字符编码并不是特别了解,建议先看看 < [原创]通俗易懂地解决中文乱码问题(1) --- 跨平台乱码 >. 当然,如果只是针对解决这个Mysql插入报错问题,本篇足够了. 一.定位错误 定位错误绝对是至关重要的一环.我建议遇到问题耐心分析一下比较好,毕竟“不是所有的牛奶都叫特仑苏”. 引起同一个问题的可能有很多,别人的解决方案也许并不适合自己. 那先看看问题出现在哪了,报错如下: 发现的确是编码错误, 16进制的错误提示(\xF0\x9F\x94\xA5\x

swfupload组件后台获取中文文件名称乱码的问题解决

   问题描写叙述:用swfupload上传文件,含有中文名称的文件上传会报错,我用的是获取FileItem对象,用FileItem对象的getName()方法获取文件名会乱码,试着用request.setCharacterEncoding("UTF-8")及fileName= new String(fileName.getBytes("iso-8859-1";),"UTF-8"); 都不能够,用FileItem对象.getString(&quo

修正IE9中文字体名称失效的问题

IE9浏览器在CSS中定义中文字体名称的时候,line-height不能垂直居中,解决办法其实很简单,这里是通过转换字体Unicode编码来解决IE9兼容问题.也就是将平时我们定义的font-family:"宋体";变为font-family:"\5B8B\4F53";如果你定义的不是宋体而是其它字体,你可以参考Unicode字符编码对照表.前端资源分享 以下是大家常用的字体Unicode转换对照: .代码   黑体:\9ED1\4F53 宋体:\5B8B\4F53

通俗易懂地解决中文乱码问题(2) --- 分析解决Mysql插入移动端表情符报错 ‘incorrect string value: &#39;\xF0...

原文:[原创]通俗易懂地解决中文乱码问题(2) --- 分析解决Mysql插入移动端表情符报错 'incorrect string value: '\xF0... 这篇blog重点在解决问题,如果你对字符编码并不是特别了解,建议先看看 < [原创]通俗易懂地解决中文乱码问题(1) --- 跨平台乱码 >. 当然,如果只是针对解决这个Mysql插入报错问题,本篇足够了. 一.定位错误 定位错误绝对是至关重要的一环.我建议遇到问题耐心分析一下比较好,毕竟“不是所有的牛奶都叫特仑苏”. 引起同一个问

Linux下MySQL 5.5的修改字符集编码为UTF8(彻底解决中文乱码问题)

一.登录MySQL查看用SHOW VARIABLES LIKE ‘character%’;下字符集,显示如下:+--------------------------+----------------------------+| Variable_name | Value |+--------------------------+----------------------------+| character_set_client | utf8 || character_set_connectio

在英文版操作系统中安装的MS SQL server,中文字段无法匹配

在英文版的操作系统中安装的MS SQL server,会出现中文字段无法被匹配到.其原因在于英文环境下安装的MS SQL server的排序规则不包括中文. 所以解决办法就是更改MS SQL server的排序规则:一般情况下,只需要右键数据库->properties->optiones->collation->chose "Chinese RPC CI AS"->OK.如果执行成功则OK. 但是如果数据库中设置了一些临时表的依赖,那么执行会报错. 解决办