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、保存好代码后使用浏览器查看效果。
visibility隐藏，是不可见，但元素在文档流中仍然是存在的，而且它所占用的位置也仍然是存在的。就好像这个元素穿了一件隐身衣，你看不见它，但它实际上是存在的！而display消失，则是整个消失，从文档流中删掉，而且它原来所占用的位置也会被取消（后面的其他元素会挤上来重新占用它的位置）。就好像这个元素人间蒸发了，你不但看不到它，你也摸不到它，因为它不存在了！
实现div隐藏可以通过设置display、visible和div的大小等实现隐藏效果。cssdisplay属性display属性规定元素应该生成的框的类型。值为none时，此元素不会被显示。/*示例*/div{display:none}cssvisibility属性
visibility属性规定元素是否可见。值为hidden时表示元素是不可见的。/*示例*/div{visible:hidden}提示:visible:hidden和display:none的区别是，即使不可见的元素也会占据页面上的空间。"display"属性可以用来创建不占据页面空间的不可见元素。(visible和display属性的其他可能值可在w3school查看)。设置div的大小实现隐藏
将div的宽度和高度设置为零，也可以达到隐藏的效果。/*示例*/div{width：0pxheight:0pxoverflow:hidden/*规定当内容溢出元素框时隐藏。防止div大小设置为零，里面的文本却还是显示。*/}
