学习布局（15） 段落类的样式

line-height:
         设置元素当中的每行文本的行高（行间距）

     .test {
            width: 300px;
            height: 40px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #cccccc;
            line-height: 40px;
            text-decoration: underline;
        }

 text-decoration

• underline：加下划线
• overline: 加上划线
• blink: 定义闪烁的文本

    text-decoration: underline;

text-indent: 设置元素的首行文本缩进

•   可以为负值，负值表现为悬挂缩进，最常用的单位为 em
•   length,   固定的缩进，默认0
•   %         定义基于父元素宽度的百分比缩进
•  inherit   规定从父元素继承text-inherit属性的值

  

.box2 p {
    /** 段落文本首行内容向前移动两个字符  */
    text-indent: -2em;
    margin-left: 2em;
}

text-align: 设置元素中文本内容的水平对齐方式

•      left:    把文本排列在左边

•      right:   把文本排列在右边

•      center:  把文本排列在中间

•      justify: 实现两端对齐

•      inherit: 规定从父元素继承text-align属性的值

vertical-align:    设置元素的垂直居中

 .wrap div {
            height: 50px;
            border: 2px solid black;
            margin-bottom: 20px;
        }

        .word-longer {
            word-spacing: 2px;
        }

        .word-shorter {
            word-spacing: -5px;
        }

        .letter-longer {
            letter-spacing: 2px;
        }

        .letter-shorter {
            letter-spacing: -5px;
        }

<div class="wrap">
        <div>正常模式下的: HTML5布局之路- The road of HTML5 layout</div>
        <div class="word-longer">加大word-spacing 的: HTML5布局之路- The road of HTML5 layout</div>
        <div class="word-shorter">缩小word-spacing 的: HTML5布局之路- The road of HTML5 layout</div>
        <div class="letter-longer">加大letter-spacing 的: HTML5布局之路- The road of HTML5 layout</div>
        <div class="letter-shorter">缩小letter-spacing 的: HTML5布局之路- The road of HTML5 layout</div>
    </div>

 word-spacing:

    设置元素文本的单词键的空白(即字间距)
    该属性可以为负值。
    如果提供一个正长度值,字词之间的间隔会增加, 反之提供负值，间距会减少

letter-spacing: 

    设置元素文本的字符间空白长度为2个像素

 <div class="main">
        <div class="common">正常的显示效果：《HTML5布局之路》的作者也是HTML5学堂的创始人。http://www.h5course.com</div>
        <div class="common">yidachuangdeyingwenzimuhaimeiyoubanfabeiqufenkai</div>
        <div class="common word-b">word-break: break-all; 截断的显示效果：《HTML5布局之路》的作者也是HTML5学堂的创始人。http://www.h5course.com</div>
        <div class="common word-b">word-break: break-all; yidachuangdeyingwenzimuhaimeiyoubanfabeiqufenkai</div>
        <div class="common word-w">word-wrap: break-word; 截断的显示效果：《HTML5布局之路》的作者也是HTML5学堂的创始人。http://www.h5course.com</div>
        <div class="common word-w">word-wrap: break-word; yidachuangdeyingwenzimuhaimeiyoubanfabeiqufenkai</div>
    </div>

        .common {
            width: 300px;
            margin-bottom: 10px;
            border: 1px solid red;
        }


        .word-b {
            word-break: break-all;是用来断开单词的，在单词到达边界时，下个字母自动换到下一行
        }

        
        
        .word-w {
            word-wrap: break-word; 是进行强制换行的，中文没有任何问题、英文没有任何问题，但对于长
串的英文就不起作用
        }

 

  word-wrap: 设置长单词可以换行

• normal: 默认处理
• break-word: 在长单词或者URL地址内部进行换行

word-break: 设置自动换行的处理方法

• word-break: keep-all 只能在半角空格或连字符处换行
• word-break: break-all 允许在单词内换行, 在单词到边界时，下个字母自动到下一行

letter-spacing 与 word-spacing 有什么区别？

• word-spacing 添加每个单词之间的空白, 对中文无效
• letter-spacing 添加字母之间的空白, 对于汉字以一个字进行间隔，对于英文以一个字母进行间隔