实现文字字数不等对其

 :空格   占据宽度受字体的影响

 透明;占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

 透明;占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

中文字符:

中文都是等宽的,因此可以使用  和  实现两个 三个  四个字符的对齐(还可以使用&#x3000:据的宽度正好是1个中文宽度,而且基本上不受字体影响)

当中文和英文混杂的时候,使用  等空格实现冒号的完美对齐还是有些困难的,除非英文使用的是等宽字体,于是乎,我们就可以使用普通的 空格做英文字符的宽度调节。

英文字符和一些非文字的符号一般都是非等宽的,有时候为了美观让它们等宽,可以使用等宽字体,(在网上下载常用的等宽字体)

在web页面上,一般有3种书写:

1. HTML中字符输出使用&#x配上charCode值;
2. 在JavaScript文件中为防止乱码转义,则是\u配上charCode值;
3. 而在CSS文件中,如CSS伪元素的content属性,直接使用\配上charCode值。
4. unicode-rangeU+配上charCode值。

unicode编码转换:http://tool.chinaz.com/tools/unicode.aspx

demo:想在HTML/JS/CSS中转义“我”这个汉字,分别是:

  1. \u6211, 如console.log(‘\u6211‘);
  2. \6211, 如.xxx:before { content: ‘\6211‘; }

考虑到直接 这种形式暴露在HTML中,可能会让屏幕阅读器等辅助设备读取,从而影响正常阅读流,因此,我们可以进一步优化下,使用标签,利用伪元素,例如:

.half:before { content: ‘\2002‘; speak: none; }
.full:before { content: ‘\2003‘; speak: none; }
时间: 2024-11-08 01:28:33

实现文字字数不等对其的相关文章

iOS_根据文字字数动态确定Label宽高

iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 // iOS7_API_根据文字 字数动态确定Label宽高 // 设置Label的字体 HelveticaNeue Courier UIFont *fnt = [UIFont fontWithName:@"HelveticaNeue" size:24.0f]

iOS 根据文字字数动态确定Label宽高

iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 // iOS7_API_根据文字 字数动态确定Label宽高 // 设置Label的字体 HelveticaNeue Courier UIFont *fnt = [UIFont fontWithName:@"HelveticaNeue" size:24.0f]

iOS根据文字字数动态确定Label宽高

我们有时候在写项目的时候,会碰到,意见反馈,还有其他地方,讲座活动细则等需要大篇展示的文本, 因为每次服务器返回的内容大小不一,所以需要动态的调整label的宽高: 在ios 6 的时候可以: -(void)creatLabel { //根据文字 字数动态确定label宽高 _nameLabel = [[UILabel alloc]init]; _nameLabel.frame = CGRectMake(100, 100, 100, 40); _nameLabel.backgroundColor

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

web页面相关的一些常见可用字符介绍——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1623 正文开始之前先分享两个与字符相关的东西.首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片.如下: 然后是一个页面,是我收集的些杂七杂八字符页面,地址如下:http://www.zhangxinxu.com/sp/character.html 希望这两个东西能对您有所帮助,ok,下面是本文的主要

站长工具 &gt; 日常实用工具

百度相关 百度收录查询 指定时间内百度搜索,对指定网站的网页数量及具体情况 百度关键词挖掘 查询关键词PC指数.移动指数.收录量及排名 百度关键词地区排名 有些关键词在各地的排名是不一样的,就是通常说的关键字地区排名 百度关键词即时查询 百度相关搜索.百度推荐.其他人在搜的相关关键词! 百度关键词优化分析 帮助站长估算优化该关键词的难易程度及优化成本 SEO相关 SEO综合 了解该域名的相关信息,如域名年龄相关备案等等,及时调整网站优化. SEO优化建议 快速定位你页面哪些地方存在不利seo的因

Android Material Design(一)史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActionButton.Shadows.Ripples.TabLayout.RecyclerView.Card.NavigationView.BottomSheet.Palette控件. 转载请注明出处,谢谢!! http://blog.csdn.net/johnny901114/article/deta

建设吐槽网站系列(一)

建设吐槽网站(一)之网站规划 灵感来源于一个中午,突然想到学校里有论坛,有小型的社区,但是呢缺少一个可以吐槽学校并且让学校的领导们(比如,院长..)们看到的平台,实际上是能够更好的解决童鞋们生活学校中出现的问题,所以就有了以下的内容,客官,请跟我来....... 先进行网站的策划,大致如下: 除了上素的内容外,还要有管理员,可以进行删帖,有敏感字屏蔽,删除内容等操作,每日十槽可以再加上微信公众号的推送,对于:编辑吐槽的话有文字字数限制,之后可能会加上校内暴走大事件(文字)....再说. 打算学学

根据字符长度动态确定UIlabel宽高

iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 1 // iOS7_API_根据文字 字数动态确定Label宽高 2 3 4 // 设置Label的字体 HelveticaNeue Courier 5 UIFont *fnt = [UIFont fontWithName:@"HelveticaNeue" s