CSS超出部分显示省略号的方法（单行和多行）

最新推荐文章于 2024-08-06 19:00:26 发布

cncco

最新推荐文章于 2024-08-06 19:00:26 发布

阅读量6.2k

点赞数 1

分类专栏： CSS HTML JS

本文链接：https://blog.csdn.net/cncco/article/details/49010503

版权

JS 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

一、单行超出部分显示为省略号：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>省略号 test</title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
padding:10px; 
font-family:Arial; 
} 
#test { 
position:relative; 
width:150px; 
height:20px; 
line-height:20px; 
text-overflow:ellipsis; 
white-space:nowrap; 
*white-space:nowrap; 
overflow:hidden; 
border:1px solid #999; 
} 
#test span{ 
position:absolute; 
top:0; 
right:0; 
display:block; 
float:left; 
} 

</style> 
</head> 
<body> 
<div id="test">小虾奋斗起来吧，加油加油加油加油加油加油</div> 
</body> 
</html>

二、多行用CSS无法实现，可以用JS：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById('demo');
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+'...';
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>

第一种方法要求必须设置容器元素的宽度（px，%不行）

第二种方没法精确的显示到行尾，但更灵活

想用哪种，自己选吧。