/* 一行显示*/
-webkit-line-clamp: 1
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box
/*子元素的排列方式 */
-webkit-box-orient: vertical
text-overflow:ellipsis
overflow: hidden
word-break:break-all
}
在CSS中，text-overflow:ellipsis可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。
li{text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:blockword-break:keep-all
本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏
这样子就可以，你可以把li改成你的元素。
1、新建一个html页面。
2、在html代码页面找到<body>标签，在<body>标签里创建一个<p>标签，然后输入显示的内容并添加一个class类为 class="cont"。
3、找到<title>标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。
4、为cont类添加内容显示为一行：white-space: nowrap，内容超出后显示为省略号：text-overflow: ellipsis。
5、保存好代码后使用浏览器查看效果。
