前端时间项目版本迭代,修改代码时发现使用了关于word-spacing和letter-spacing。先说下使用场景,以前的项目中,经常遇到某些字符间有一些间距,我看了一些同事的代码是这么实现的:

<p>操&nbsp作</p>

如果之间比一个空格距离要宽的话,就多加几个&nbsp,这个方法虽然可行,总觉得是太暴力了,于是自己使用了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的使用的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  4. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  5. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  8. css常用属性总结:颜色和单位

    在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色 当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...

  9. javascript之css常用属性

    1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed :   生成绝对定位的元素,相对于浏览 ...

  10. css常用属性2

    1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...

随机推荐

  1. 彻底解决WP的TextBox中文字过长显示不出来的问题

    文字如果过长的话在TextBox中会显示不完全,这个大家都知道了,后来有人做了ExTextblock增强控件,大部分文字是可以显示出来了,不过,在某些情况下还是会有显示不全的情况. 这个时候一个解决方 ...

  2. 简单使用dom4j

    package com.dom4j; import java.io.FileWriter; import java.io.IOException; import java.io.Unsupported ...

  3. 福大软工 · 第十一次作业 - Alpha 事后诸葛亮

    拖鞋旅游队团队事后诸葛亮会议 前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10054510.html 时间:2018-12-1 20:00 地 ...

  4. QT Creator快捷键不能用

    我现在搞明白了,热键之所以不行,是因为我开了Fakevim原因.关了fakevim就能用热键了. 如果开了Fakevim,连基本的Ctrl+C,这样的复制快捷键都不能用. 快速添加方法实体(.cpp) ...

  5. 找到链表的倒数第k个节点 python

    题目:给定一个链表的头节点,输出链表倒数第k个节点的值 分析:最简单的思路就按顺序访问链表节点,得到链表的长度x之后,再次从头节点出发,访问到第x-k+1个节点时,就是链表倒数第k个节点,但是这样的方 ...

  6. 【整理】简单的数学期望和概率DP

    数学期望 P=Σ每一种状态*对应的概率. 因为不可能枚举完所有的状态,有时也不可能枚举完,比如抛硬币,有可能一直是正面,etc.在没有接触数学期望时看到数学期望的题可能会觉得很阔怕(因为我高中就是这么 ...

  7. CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑等

    Mac OS的一些:   华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 俪黑 P ...

  8. emacs配置emacs-clang-complete-async

    debian下需要安装apt安装下clang和llvm sudo apt-get install llvm-dev sudo apt-get install libclang-dev 网上抄来一个大神 ...

  9. Python格式化输出%s和%d

    python print格式化输出. 1. 打印字符串 print ("His name is %s"%("Aviad")) 效果: 2.打印整数 print ...

  10. Partition does not start on physical sector boundary

    今天给一块硬盘分区,用fdisk按照默认步骤执行,遇到这个问题: [root@bogon ~]# fdisk /dev/sdfDevice contains neither a valid DOS p ...