css+html 关于文本的总结（整理中）

布局1：固定行数

<div>
    <p>示例文字示例文字示例文字示例文字</p>
</div>
<!-- CSS代码 -->
div {
    width:100px;  
    overflow:hidden;
} 
p {
    overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;  /* 这是控制行数，此行代码必须搭配上面两行代码才起作用 */
}

　　-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

　　限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

样式1：文字超出范围显示方式

　　text-overflow：

　　值：1. clip 修剪文本

　　　　2. ellipsis 显示省略符号来代表被修剪的文本

　　　　3. string 使用给定的字符串来代表被修剪的文本。

样式2：文本换行

<br/> html代码强制换行
<p></p> 直接分段换行
1. 　　这种方式的缺点是p标签会有margin和padding
给父级设置宽度，自动换行
1. 　　这种方式对连续的数字和英文单词不起作用了
css中的换行方式
1. word-break: normal|break-all|keep-all; word-break 属性规定自动换行的处理方法。如果该行末端有个英文单词很长它会把单词截断
  1. 　　
    
    值描述
    
    normal 使用浏览器默认的换行规则。
    
    break-all 允许在单词内换行。
    
    keep-all 只能在半角空格或连字符处换行。
2. word-wrap: normal|break-word; word-wrap 属性允许长单词或 URL 地址换行到下一行。区别就是它会把末尾的长单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
  1. 　　
    
    值描述
    
    normal 只在允许的断字点换行（浏览器保持默认处理）。
    
    break-word 在长单词或 URL 地址内部进行换行。