CSS 揭秘(5)--换行

Posted by liveipool on February 8, 2017

换行

连字符断行

在网页中,文本两端对齐其实并不常用。虽然从CSS 1开始就有text-align:justify,但这个属性会产生“单词孤岛”现象,损伤了可读性:
20.3.png
好的两端对齐机制总是应该与连字符端行相辅相成的。
好在CSS3多了一个新的属性:
hyphens(中文意思:连字符):它接受三个值,none、manual、auto。manual是初始值,只要我们将其设为auto,就可以实现连字符端行的效果。

hyphens: auto;

然而,至今IE,Firefox,Edge,Safari上都可以使用这个属性,Chrome和Opera还未完全支持,这种情况真是很少见,看来blink的工作人员还得再努点力了。

Chrome中:
20.1.png
Firefox中(hyphens属性生效了):
20.2.png

有一个地方还需要注意,只设置hyphens属性很可能是没有效果的,要使用lang属性对语言进行设置:

div(lang="en") "The only way to get rid of a temptation is to yield to it." --Liveipool

Firefox中必须要设置了lang属性后才能看出效果。

插入换行

在我们使用一些列表时,我们会希望按照一行行名值对的形式进行呈现信息,如下图这样的:
21.3.png
我们从下面这段代码开始:

// jade
dl.w-300.h-300.m-100.fs-30
	dt Name:
	dd Liveipool
	dt Email:
	dd liveipool@qq.com
	dt Location:
	dd Chongqing

// css
dd {
	margin: 0;
	font-weight: bold;
}

21.1.png
由于< dt >和< dd >都是块级元素,所以现在是上图那样的效果。我们可能会第一反应加上display:inline。效果往往如下:
21.2.png
明显这样也是不符合要求的。

我们现在的思路是,在每个< dd >后面加上一个换行符。这里要注意了,尽量别乱用< br >,因为那样会使代码看得难看。
实际上,有一个Unicode字符是专门代表换行符的:0x000A(换行字符,相当于JavaScript中的‘\n’)。在CSS中,这个字符可以写作“\000A”,或简化为“\A”,我们可以用它来作为::after伪元素的内容,并将其添加到每个< dd >元素的尾部。

dd::after {
	content: '\A';
}

还要注意一点的是,不同浏览器情况下,可能会默认地将换行符和一些空白符合并导致上面的换行符失效,这时我们需要对white-space属性进行设置,使其保留空白符,完整代码如下:

dd, dt {
	display: inline;
}

dd {
	margin: 0;
	font-weight: bold;
}

dd::after {
	content: '\A';
	white-space: pre; //在使用了这个属性保留了空白符以后,注意不要随便乱加空格什么的,因为可能在不同浏览器上产生意想不到的后果
}

21.3.png
现在得到的效果就和我们最初预想的一样。
可问题又来了,如果现在某个< dt >后面有两个< dd >了呢?

// ...
dt Email:
dd liveipool@qq.com
dd 123456789@qq.com
// ...

可以想见,现在的效果如下:
21.4.png

因此,我们应该针对< dt >之前的最后一个< dd >来插入换行,而不是对所有< dd >都这么做。或者换种思路,换行符不要加在< dd >的后面,而是加在< dt >的前面。
但加在< dt >的前面又会导致第一行变为空行,因此我们可以尝试下面这些选择符来代替单纯的< dt >:

  1. dt:not(:first-child)。dt:first-child指第一个dt元素,not表示不是第一个的dt元素,注意括号不能省略。
  2. dt ~ dt。指位于相同父元素下的处于一个dt后面的dt。
  3. dd + dt。指位于相同父元素下的处于一个dd后面的dt。

在这里选择第三种比较好,因为当出现多个dt对应一个dd的情况时,只有其中的第一个dt会被选上。
最后,我们还希望增加可读性,在”(后面还有一个dd的dd的尾部)前面还有一个dd的dd头部插入一个逗号。“,完整代码如下:

// jade
dl.w-300.h-300.m-100.fs-30
	dt Name:
	dd Liveipool
	dt Email:
	dd liveipool@qq.com
	dd 123456789@qq.com
	dt haha,
	dt Location:
	dd Chongqing

// css
dd, dt {
	display: inline;
}
dd {
	margin: 0;
	font-weight: bold;
}
dd + dt {
	color: red;
}
dd + dt::before {
	content: '\A';
	white-space: pre;
}
dd + dd::before {
	content: ',';
	font-weight: normal;
}

21.5.png
若还想要有其他效果,原理也大同小异了。