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：文本换行

1. <br/>  html代码强制换行
2. <p></p>  直接分段换行
   1. 　　这种方式的缺点是p标签会有margin和padding
3. 给父级设置宽度，自动换行
   1. 　　这种方式对连续的数字和英文单词不起作用了

4. 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 地址内部进行换行。

样式3：文本不换行

1. white-space ：nowrap; 文本不会换行，直到遇到<br/>