css常用属性总结:关于word-spacing和letter-spacing的使用
前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing。先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的:
<p>操 作</p>
如果之间比一个空格距离要宽的话,就多加几个 ,这个方法虽然可行,总觉得是太暴力了,于是自己使用了css来实现该效果,但是中间也遇到一些以前没注意问题,那就是word-spacing和letter-spacing的差别。
开始自己也想很简单,于是直接使用p{word-spacing:10px;},然后直接尴尬了,没有任何效果,主要原因还是没有细究两个之间的差别,先看看它的语法吧。
letter-spacing
语法:
letter-spacing : normal | length
参数:
normal : 默认间隔
length : 由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
说明:
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
对应的脚本特性为letterSpacing。
word-spacing
语法:
word-spacing : normal | length
参数:
normal : 默认间距
length : 由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
说明:
检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
对应的脚本特性为wordSpacing。
总结起来:letter-spacing为每个字符之间的空白距离,word-spacing为单词之间的空白距离,
其他没有效果,所以上面就好解释了,中文文字下用word-spacing是没有效果的,所以只能用letter-spacing。
css常用属性总结:关于word-spacing和letter-spacing的使用的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css常用属性1
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- css常用属性总结:颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
- javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...
- css常用属性2
1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...
随机推荐
- New Concept English Two 6 13
$课文11 礼尚往来 105. I was having dinner at a restaurant when Tony Steele came in. 我正在一家饭馆吃饭,托尼.斯蒂尔走了进来. ...
- Memcached工作原理及常见问题
memcached是怎么工作的? Memcached的神奇来自两阶段哈希(two-stage hash).Memcached就像一个巨大的.存储了很多<key,value>对的哈希表.通过 ...
- 阿里历年经典Java面试题汇总
Volatile的特征: A.禁止指令重排(有例外) B.可见性 Volatile的内存语义: 当写一个volatile变量时,JMM会把线程对应的本地内存中的共享变量值刷新到主内存. 当读一个vol ...
- 在Windows中配置Rsync同步
Rsync是一款不错的文件免费同步软件,可以镜像保存整个目录树和文件系统,同时保持原来文件的权限.时间.软硬链接.第一次同步时 rsync 会复制全部内容,下次只传输修改过的文件部分.传输数据过程中可 ...
- python3 随机生成UserAgent
安装库 pip install fake_useragent #引入 from fake_useragent import UserAgent; ua = UserAgent(); print(ua. ...
- 一个Android开发妹子的找工作心酸史
阿里:实习二面被KO 1,人生接到的第一个电话面试来自大家都说好的阿里,心情激动,说话颤抖,本以为没有戏,然而第二天接到了二面的电话有点小激动.然后就是被ko了,死的原因很简单,那时候单纯的自己什么都 ...
- 使用jsonschema2pojo-maven-plugin 插件根据json文件生成代码
jsonschema2pojo 是一个不错的工具,可以帮助我们快速的根据json 文件生成pojo代码,提高开发效率,以下为简单的 使用maven 插件进行代码生成 使用maven 插件配置 < ...
- 微信跳一跳,Python辅助自动跳程序
一.说明 此代码借鉴一位大神提供在gitHub上的源码,已经做了简化合并处理,成功连上手机并运行后,可实现自动玩微信跳一跳游戏,刷个1000+的分数轻轻松松 github源码地址 https://gi ...
- {转载}需要同时设置 noatime 和 nodiratime 吗?
相信对性能.优化这些关键字有兴趣的朋友都知道在 Linux 下面挂载文件系统的时候设置 noatime 可以显著提高文件系统的性能.默认情况下,Linux ext2/ext3 文件系统在文件被访问.创 ...
- Appium Desktop介绍-xcodebuild failed with code 65 问题解决
Appium Desktop介绍-xcodebuild failed with code 65 问题解决 一.Appium Desktop介绍 Appium Desktop是一款用于Mac.Wind ...