CSS文本效果
CSS text-overflow 属性规定应如何向用户呈现未显示的溢出的内容。
//裁剪
text-overflow: clip; //隐藏
text-overflow: ellipsis; 
CSS字换行（Word Wrapping）
CSS word-wrap 属性使长文字能够被折断并换到下一行。
如果一个单词太长而无法容纳在一个区域内，它会向外扩展。通过word-wrap属性，您可以强制对文本进行换行-即使这意味着在此中间将其拆分：
p {word-wrap: break-word;
}CSS换行规则
CSS word-break 属性指定换行规则。
p.test1 {word-break: keep-all;
}p.test2 {word-break: break-all;
}CSS书写模式
CSS writing-mode 属性规定文本行是水平放置还是垂直放置。
p.test1 {writing-mode: horizontal-tb;
}span.test2 {writing-mode: vertical-rl;
}
CSS文本效果属性
| 属性 | 描述 |
|---|---|
| text-align-last | 指定如何对齐文本的最后一行。 |
| text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
| word-break | 指定非 CJK 脚本的换行规则。 |
| word-wrap | 允许长单词被打断并换到下一行。 |
| writing-mode | 指定文本行是水平放置还是垂直放置。 |
CSS属性text-align-last 指定一行或者块中的最后一行在被强制换行之前的对齐规则。
值：
left:行内内容对齐到行框的左边缘。
right：行内内容对齐到行框的右边缘。
center: 行内内容在行框内居中。
justify：最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。
CSS Web字体
CSS @font-face规则
Web字体允许 Web 设计人员使用用户计算机上未安装的字体。当您找到/购买了想要使用的字体后，只需将字体文件包含在您的Web服务器上，它将在需要时自动下载给用户。您的“自有”字体在CSS@font-face 规则中进行定义。
不同的字体格式
TrueType字体（ttf) ：TrueType是1980年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType是Mac OS 和 Microsoft Windows操作系统最常用的字体格式。
OpenType字体（otf)：OpenType是可缩放计算机字体的格式。它基于TrueType构建，并且是Microsoft的注册商标。今天，OpenType字体在主要计算机平台上得到普遍应用。
Web开放字体格式（woff）：WOFF是用于网页的字体格式。它于2009年开发。WOFF本质上是具有压缩和其他元数据的OpenType 或 TrueType。 目标是支持在有带宽限制的网络上从服务器到客户端进行字体开发。
Web 开放字体格式（woff2.0）：TrueType/Open 字体比WOFF1.0提供更好的压缩。
SVG字体/形状：SVG字体允许在显示文本时将SVG用作字形。SVG1.1规范定义了一个字体模块，该模块允许在SVG文档中创建字体。您还可以将CSS应用于SVG文档，同时@font-face规则可以应用于SVG文档中的文本。
嵌入式OpenType（eot）: EOT字体是Microsoft设计的OpenType字体的紧凑形式，用作网页上的嵌入式字体。
使用您需要的字体
在@font-face规则中：首先定义字体的名称（例如myFirstFont），然后指向该字体文件。如需将字体用于HTML元素，请通过font-family属性引入字体名称(myFirstFont)：
@font-face {font-family: myFirstFont;src: url(sansation_light.woff);
}div {font-family: myFirstFont;
}使用粗体文本
您必须添加另一条@font-face规则，其中包含粗体文本的描述符：
@font-face {font-family: myFirstFont;src: url(sansation_bold.woff);font-weight: bold;
}文件“sansation_bold.woff" 是另一个字体文件，其中包含Sansation字体的粗体字符。每当带有”myFirstFont" 字体族的一段文本呈现粗体时，浏览器都会使用它。这样，您就可以为同一字体设置许多@font-face规则。
CSS字体描述
下表列出了能够在@font-face规则内定义的所有字体描述符（font descriptor)：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定义字体名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
| 可选。定义应如何拉伸字体。默认值是 "normal"。 |
| font-style |
| 可选。定义字体的样式。默认值是 "normal"。 |
| font-weight |
| 可选。定义字体的粗细。默认值是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。 |
CSS 2D 转换
CSS 转换（transforms) 允许您移动、旋转、缩放和倾斜元素。通过使用CSS transform 属性，您可以利用以下2D转换方法：
translate()、rotate()、scaleX()、scaleY()、scale()、skewX()、skewY()、skew()、matrix()。
translate() 方法
translate() 方法从其当前位置移动元素（根据为X轴和Y轴指定的参数）。
下例把 <div> 元素从其当前位置向右移动50个像素，并向下移动100个像素：
div {transform: translate(50px, 100px);
}
rotate() 方法
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子把<div>元素顺时针旋转20度：
div {transform: rotate(20deg);
}
使用负值将逆时针旋转元素。
div {transform: rotate(-20deg);
}scale() 方法
scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。
下例把<div>元素增大为其原始宽度的两倍和其原始高度的三倍：
div {transform: scale(2, 3);
}
下面的例子把<div> 元素减小为其原始宽度和高度的一半：
div {transform: scale(0.5, 0.5);
}skew()方法
skew() 方法使元素沿X 和 Y轴倾斜给定角度。
下例使<div>元素沿X轴倾斜20度，同时沿Y轴倾斜10度：
div {transform: skew(20deg, 10deg);
}如果未指定第二个参数，则值为0。因此，下例使<div>元素沿X轴倾斜20度：
div {transform: skew(20deg);
}matrix() 方法
matrix()方法把所有2D变换方法组合为一个。
matrix()方法可接受六个参数，其中包括数学函数，这些参数可以使您旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
div {transform: matrix(1, -0.3, 0, 1, 0, 0);
}transform-origin
transform-origin CSS属性让你更改一个元素变形的远点。
默认的转换原点是center
transform-origin:center;
transform-origin:left;
transform-origin: 0px 0px;
CSS转换属性
| 属性 | 描述 |
|---|---|
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |