连字符断行
CSS 文本(第三版)引入了一个新的属性 hyphens 。它接受三个值:none 、 manual 和 auto 。 manual 是它的初始值,其行为正好对应了现有的工作方式:我们可以在任何时候手工插入软连字符,来实现断词折行的效果。很显然 hyphens: none; 会禁用这种行为;而最为神奇的是,只需这短短一行 CSS 就可以产生我们梦寐以求的效果:http://dabblet.com/gist/e370ba333ae95116e212
插入换行
http://dabblet.com/gist/06517b7bb042283ee5fd105444f752b6
文本行的斑马条纹
如果是表格tr可以用
tr:nth-child(even) {
background: rgba(0,0,0,.2);
}
但如果是文本的话,可以用linear-gradient
,background-origin: content-box;
http://dabblet.com/gist/cf30f5d442533b32600d
调整 tab 的宽度
包含大量代码的网页(比如文档或教程)在样式上面对着无法回避的挑战。我们通常使用 <pre> 和 <code> 元素来显示代码,它们具有浏览器所赋予的默认样式。即使 tab 非常适合用来缩进代码 ,但人们在网页中却常常有意避开tab。这是因为浏览器会把其宽度显示为 8 个字符!
http://dabblet.com/gist/88c1523dfd1284950b4d
网友评论