前端开发中怎么实习文本溢出显示省略号
1、单行文本溢出显示省略号，单行文本溢出显示省略号并不是很难，我们设定文本显示的宽度，然后将超出部分隐藏，设置文本不会换行，最后溢出显示省略号就可以了。
2、具体的实现代码如下：
width: 300px;
overflow: hidden;
white-space:
nowrap;
text-overflow: ellipsis;
1、使用webkit引擎的浏览器：Safari（苹果系列的浏览器）和Chrome（谷歌浏览器）等等。
2、具体的实现代码如下：
width:300px;（设置宽度）
overflow: hidden;（超出隐藏）
text-overflow:ellipsis;（显示省略号）
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
-webkit-box-orient: vertical;
3、另外一种就是使用html+JavaScript来实现这个功能，js在实现的过程中会灵活很多。
4、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p id="test">吉安科技计划的喀什的健康和大家按开始登记卡圣诞节可视对讲爱神的箭卡仕达就开始大家按开始登记卡十大健康阿萨德会尽快三季度卡上登记卡号大街上大师抠脚大汉吉安科技计划的喀什的健康和大家按开始登记卡圣诞节可视对讲爱神的箭卡仕达就开始大家按开始登记卡十大健康阿萨德会尽快三季度卡上登记卡号大街上大师抠脚大汉
</body>
<script type="text/javascript">
function mitulineHide(num,con){
var contain = document.getElementById(con);
console.log(con);
var maxSize = num;
var txt = contain.innerHTML;
if(txt.length>num){
console.log('1');
txt = txt.substring(0,num-1)+"...";
contain.innerHTML = txt;
}
};
mitulineHide(20,'test');
</script>
</html>
