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> 直接分段换行
　　这种方式的缺点是p标签会有margin和padding

给父级设置宽度，自动换行
　　这种方式对连续的数字和英文单词不起作用了

css中的三种换行方式

word-break:break-all

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

样式3：文本不换行

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

text-overflow: clip | ellipsis
clip 直接切除

ellipsis 显示省略号（...)