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:break-all
   2. word-wrap:break-word
      word- break:break-all   如果该行末端有个英文单词很长它会把单词截断
      word-wrap:break-word 区别就是它会把末尾的长单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
      

样式3：文本不换行

1. white-space ：nowrap; 文本不会换行，直到遇到<br/>
2. text-overflow:   clip | ellipsis   
   1. clip  直接切除
   2. ellipsis 显示省略号（...)