1. 连字符断行——英文单词
英文文档下,实现英文单词的断行。
- 可以通过一些软连字符(
­
)来辅助浏览器进行断词 - CSS属性
hyphens
接受三个值:none
、manual
和auto
manual
是hyphens
属性的初始值,其行为可以在任何时候手工插入软连字符­
来实现断词折行的效果。而hyphens: none;
会禁用这种行为
<!DOCTYPE html>
<html lang="en"><style> div {width: 8.7em;font: 180%/1.4 Baskerville, serif;text-align: justify;background: #ccc;margin-top: 10px;}.app {/*禁用软连字符(`­`)断行 */hyphens: none;} </style><body><div>“The only way to get rid of a temptation is to yield to it.”</div><div>“The only way to get rid of a tempta­tion is to yield to it.”</div><div class="app">“The only way to get rid of a tem­ptation is to yield to it.”</div></body>
</html>
2. 换行
2.1 <br>
元素换行
2.2 Unicode 换行字符\A
一个专门代表换行符的Unicode 字符:0x000A。在 CSS 中,这个字符可以写作 “\000A”,或简化为 “\A”。我们可以用它来作为 ::after
伪元素的内容,并将其添加到每个 <dd>
元素的尾部
在 HTML 代码中输入换行符,默认情况下,这些换行符会与相邻的其他空白符进行合并。需要用
white-space: pre;
保留源代码中的这些空白符和换行
<!DOCTYPE html>
<html lang="en"><style> dt,dd {display: inline;margin: 0;}dd {font-weight: 600;}/*对 <dt> 之前的最后一个 <dd> 来插入换行*/dd + dt::before {content: "\A";white-space: pre;}/*在每个前面有<dd> 的 <dd> 头部插入逗号*/dd + dd::before {content: ", ";font-weight: normal;margin-left: -0.25em;}body {font: 150%/1.6 Baskerville, Palatino, serif;} </style><body><dl><dt>Name:</dt><dd>Lea Verou</dd><dt>Email:</dt><dd>lea@verou.me</dd><dd>leaverou@mit.edu</dd><dt>Location:</dt><dd>Earth</dd></dl></body>
</html>
3. 文本行的斑马条纹
对整个元素设置统一的背景图像,一次性加上所有的斑马条纹。
可以在CSS 中用渐变直接生成背景图像,而且可以用 em 单位来设定背景尺寸,这样背景就可以自动适配font-size
了。
<!DOCTYPE html>
<html lang="en"><style&