CSS 知识清单

记录一些用时还需要去检索用法的一些css属性。部分内容可能是从他处粘贴过来,若有侵犯请告知!

注意:非标准属性会用 * 标注

1 word-wrap word-break white-space

描述:

word-wrap、word-break为css3属性,分别定义允许长单词或 URL 地址换行到下一行;定义自动换行的处理方法;white-space 定义如何处理元素内的空白。

值得说明的是,三者的定义会出现覆盖影响。

取值:

word-wrap 默认值 normal,会继承

描述
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

word-break 默认值normal,会继承

描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

white-space 默认值 normal, 会继承

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

测试:

*2 text-rendering

描述:

Text-rendering 属性是一个非标准属性,本意是用来设置SVG的属性,之后Gecko/WebKit/Blink等内核也支持了普通DOM元素设置Text-rendering。
主要用来告诉渲染引擎(rendering engine)渲染文字的时候如何来优化,浏览器根据这个属性来权衡速度、易读性、几何精度等方面。不同系统、不同浏览器的渲染引擎不同,效果不同。

取值:

</tr>
<tr>
  <td><code>optimizeSpeed</code></td>
  <td>绘制文本时渲染速度优先,会禁用使用特殊的字距调整和某些字体的连字</td>
</tr>
<tr>
   <td><code>optimizeLegibility</code></td>
   <td>绘制文本时易读性优先,允许使用特殊的字距调整和某些字体的连字</td>
</tr>
<tr>
   <td><code>optimizeLegibility</code></td>
   <td>绘制文本时几何精度优先,可以使某些字体非间距非几何对称,达到更好的显示效果</td>
</tr>
描述
auto浏览器用渲染速度、易读性、几何精度等自动优化来绘制文本,不同浏览器效果不同

其他:

在大多情况话看不出明显区别,对一些特殊英文字体可能有效果!
参考:http://www.feeldesignstudio.com/2013/05/text-rendering/
http://www.feeldesignstudio.com/2013/05/text-rendering/