css文字超出隐藏，显示省略号？

6回答

淡雅的默

white-space: nowrap; overflow: hidden; text-overflow: ellipsis

1 0

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; }

3 0

qyy2499760117_叶子

加油吧！

0 0

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>

1 1