显示省略号
说明
text-overflow: ellipsis/clip;
clip:不显示省略号(…),而是简单的剪切;
ellipsis:当对象文本溢出时,显示省略标记;
方法一:
要实现单行文本溢出时是否显示省略标记的效果需要定义:
1.容器宽度:width:value;
2.强制文本在一行内显示:white-space:nowrap;
3.溢出内容为隐藏:overflow:hidden;
4.溢出文本显示省略号:text-overflow:ellipsis;
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 150px;
height: 150px;
border: 1px solid;
margin: 0 auto;
}
.box p{
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
<p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
<p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
<p>你何秀在同一九年里,你何秀在同一九年里你何秀在同一九年里,你何秀在同一九年里,</p>
</div>
</body>
</html>
方法二:
1.给当前设置省略号的元素加上强制不换行标签
2.给当前元素设置overflow:hidden;text-overflow:ellipsis;等属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 150px;
height: 150px;
border: 1px solid;
margin: 0 auto;
}
.box p{
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
<nobr><p>你何秀在同一九年里,你何秀在同一九年里,你何秀在同一九年里,你何秀在同一九年里,</p></nobr>
</div>
</body>
</html>