超出文本用省略号代替

1.块级元素使用

 

p{
    overflow: hidden;
    text-overflow: ellipsis; //显示省略符号来代表被修剪的文本
    white-space: nowrap;//规定段落中文本不进行换行
     width:
}

2.行内元素使用

p span{    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:block;
    width:
      }

说明：

使用的元素一定是块级元素，对行内元素要加display:block;

对使用的元素要设定宽度值

在p标签外围添加一个a标签，在a标签里面添加title属性，在title中添加全部文本，实现当鼠标放上去显示全部内容包括被隐藏的内容