《CSS 揭秘》字体排印(5)

连字符断行

设计师迷恋两端对齐效果,不过在网页中两端对齐很少使用,从css1就开始有 text-align:justify;
效果如图,显然很糟糕:
两端对齐

解决办法:
css3引入了新的属性:hyphens:\[none, manual, auto\]

使用hyphens:auto;会让浏览器决定什么时候用换行符。前提是提前设置好网页的HTML标签的lang属性。
如果使用细粒度的连字符行为,你仍然可以通过一些软连字符(­) 来辅助浏览器进行断词。这个hyphens属性会优先处理他们;

插入换行

考虑如下代码:


<dl>
    <dt>Name:</dt>
    <dd>Versdf</dd>

    <dt>Email:</dt>
    <dd>hfd@fas.me</dd>
    <dd>hfd@fas.me</dd>

    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

实现如下效果:
插入换行
解决办法:


dd + dt::before{
	content: ",";
	white-space: pre;
}
dd + dd::before{
	content: ", ";
	font-weight: normal;
	margin-left: -.25em;
}

注意:
1.多个连续的<dd>包含了(未加注释的)空白符,那么逗号前面会有一个空格,修复方法利用负边距,不一样的字体和尺寸不一定刚好是0.25em;
2.Unicode字符是专门代表换行符的:0x000A;在css中也可写为 \000A,或简化为 \A

文本行的斑马条纹

斑马条纹在UI设计中十分常见。我们可以使用:nth-child()/:nth-of-type()伪类来对奇数行和偶数行设置不同的背景,也可以使用不同的div去包裹奇数行和偶数行。


pre { 
    padding: .5em;
    line-height: 1.5;
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(
                      rgba(120,0,0,.1) 50%, transparent 0);
    background-size: auto 3em;//背景高度为line-height的两倍
    background-origin: content-box;//设置background-position基准以content box为准
    font-family: Consolas, Monaco, monospace;
}

文本行的斑马条纹

调整tab宽度

在网页中,通常使用<pre>或者<code>来显示代码。它们tab会被解析成8个字符。
调整tab宽度

而我们通常希望将其设置为4或者2。在CSS第三版中,增加了属性tab-size可以用来控制这个属性.


pre {
    tab-size: 2
}

调整tab宽度

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/620.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部