换行

连字符断行

在网页中，文本两端对齐其实并不常用。虽然从CSS 1开始就有text-align：justify，但这个属性会产生“单词孤岛”现象，损伤了可读性：

好的两端对齐机制总是应该与连字符端行相辅相成的。
好在CSS3多了一个新的属性：
hyphens（中文意思：连字符）：它接受三个值，none、manual、auto。manual是初始值，只要我们将其设为auto，就可以实现连字符端行的效果。

hyphens: auto;

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

Chrome中：

Firefox中（hyphens属性生效了）：

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

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

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

插入换行

在我们使用一些列表时，我们会希望按照一行行名值对的形式进行呈现信息，如下图这样的：

我们从下面这段代码开始：

// 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;
}

由于< dt >和< dd >都是块级元素，所以现在是上图那样的效果。我们可能会第一反应加上display：inline。效果往往如下：

明显这样也是不符合要求的。

我们现在的思路是，在每个< 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; //在使用了这个属性保留了空白符以后，注意不要随便乱加空格什么的，因为可能在不同浏览器上产生意想不到的后果
}

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

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

可以想见，现在的效果如下：

因此，我们应该针对< 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;
}

若还想要有其他效果，原理也大同小异了。

• ← Previous Post
• Next Post →