单行或多行文本溢出

<p class="single">这是单行文本1这是单行文本2这是单行文本3</p>
<p class="multi">
    CSS目前最新版本为CSS5，是能够真正做到网页表现与内容分离的一种样式difficulty语言。
    相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，
</p>

文本溢出的css：

p{
    width: 150px;
    border: 1px solid red;
}

单行文本溢出：
.single
{
    overflow: hidden;
    white-space: nowrap;

    /* white-space 属性设置如何处理元素内的空白。
    white-space: nowrap 文本不会换行,只写在一行,如果没有overflow: hidden
    则会超出容器的宽度继续显示.*/
    text-overflow: ellipsis;
    /*text-overflow 属性规定当文本溢出包含元素时的显示样式
    text-overflow: ellipsis 溢出时,使用省略号表示
    text-overflow: clip 溢出时直接截断*/
}

多行文本溢出：
.multi
{
    display:-webkit-box;  
    overflow: hidden;
    text-overflow: ellipsis;
    word-break:break-all;
    /*规定非中日韩文本的换行,word-break:break-all 允许在单词内换行
    word-break:keep-all 只能在半角落空格或连字符处换行*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp:4;  /*只显示4行*/

}