-
淡雅的默
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
-
Suber丶林
/* 单行文本(默认已经使用了块级，如p) */
.single {
/* 行内元素加上display: block; */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 指定文本行数 */
/* 使用CSS3属性，不兼容低版本浏览器 */
.multi {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
/* 2行之后溢出才用省略号 */
-webkit-line-clamp: 2;
}
-
qyy2499760117_叶子
加油吧！
-
qyy2499760117_叶子
你应该是要这种效果。<!DOCTYPE html><html><head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/></head><body><div> <span id="haL" title="">大家，我是叶子，我来慕课网已经很久了，怎么都没有人认识我呢。</span></div><script type="text/javascript" language="JavaScript" > var haL2=document.getElementById("haL").innerText; document.getElementById("haL").title = haL2;/*鼠标放上去时显示所有*/ if (haL2.length > 14) { haL2 = haL2.substring(0, 14) + "......"; document.getElementById("haL").innerText=haL2;//超出用符号代替 }else{ document.getElementById("haL").innerText=haL2; }</script></body></html>