css属性之文字控制

连字符断行

很多网页设计师在设计网页的时候，都喜欢将一段文字段落两端对齐，不过在网页中两端对齐到是不特别常用，而且有经验的设计师也是极少使用的，但是从css 1开始就已经有text-align:justify;，但是为什么不使用呢？

text-align:justify;

但是调节两端对齐处理的时候，需要调节单词的间距，此时会出现一个单词和其他单词距离过大的情况，这样看起来反而更加的糟糕，而且损伤了可读性，文本看起来就不是特别的自然。

那有什么方式来解决这个问题呢？
css 3引入了一个新的属性hyphens，它接收三个值：none、manual和auto。

hyphens:manual;是默认的初始值
hyphens:none;是默认的初始值
hyphens:auto;是默认的初始值

在使用这个属性的同时，也需要在html标签中的lang属性中指定合适的语言，这个是一个网页在开始搭建的时候就应该做的事情。

如果需要更细致的控制连字符的行为，仍然是需要通过一些软连字符来辅助浏览器进行断词，hyphens属性先处理文字，再去计算需要断词的位置。

如果浏览器不支持此属性，那么浏览器就会优雅降级，依然会正常的显示页面中的内容。

自定义下划线

text-decoration:underline;文本下滑线
但是有些时候，这个属性在设计师眼中并不完美，那么我们可以使用border来模拟下划线的样式。

a[href]{
    border-bottom:1px solid #000000;
    text-decoration:none;
}

但是这样也有一些问题，如果是单行文本，那么是大概可以的，但是收到行高的影响，下划线就是和文本有一些距离。

那么怎样将这个问题解决呢？

display:inline-block;
border-bottom:1px solid #000000;
line-height:.9;

虽然这样可以解决文本距离下划线过长，但是会影响正常文本换行，那么我们还可以尝试用box-shadow来实现。

box-shadow:0 -1px #000000 inset;

但是和border-bottom一样，也会出现距离过大的问题。

怎样解决呢？
那就是background相关属性，三行代码，天下无敌。

background:linear-gradient(#000,#000) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;

进一步的调整一下，更加美观。

background:linear-gradient(#000,#000) no-repeat;
background-size:100% 1px;
background-position:0 1.15em;
text-shadow:0.5em 0 white , -0.5em 0 white;

这个方法很灵活，也可以形成虚线，例如：

background:linear-gradient(90deg #000 70%,transparent 0) repeat-x;
background-size:0.2em 2px;
background-position:0 1em;