单行文本溢出省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</p>
</body>
</html>
<style type="text/css">
p{
500px;
overflow: hidden; //设置溢出裁剪
text-overflow: ellipsis; //溢出时显示省略标记
white-space:nowrap; //单行显示
}
</style>
多行文本溢出省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</p>
</body>
</html>
<style type="text/css">
p{
200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
}
</style>
关于-webkit-box-orient：
规定子元素是否应按水平或垂直排列。
目前所有主流浏览器都不支持box-orient属性。
Firefox通过私有属性- MOZ-box-orient支持。
Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.