1、新建一个html文件，命名为test.html。
2、在test.html文件内，创建一个包含文字的div，并设置div的class属性为content，主要用于对div进行css样式设置。
3、在test.html文件内，对类名为content的div进行样式设置，代码如下。
4、在css内，设置div的宽度为130px，同时设置其浮动向左，居左对齐。
5、在css内，设置div内的文字不换行，当文字超过宽度width时，隐藏文字。
6、在css内，设置div内文字超过宽度时，以点点点代替文字显示。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{
width: 100px
overflow:hidden
text-overflow:ellipsis
display:-webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:2
}
3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示 。
![你有《[韩顺平]轻松搞定网页设计(html+css+js)》的教程吗，给我一份好吗，感激不尽](/aiimages/%E4%BD%A0%E6%9C%89%E3%80%8A%5B%E9%9F%A9%E9%A1%BA%E5%B9%B3%5D%E8%BD%BB%E6%9D%BE%E6%90%9E%E5%AE%9A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%28html%2Bcss%2Bjs%29%E3%80%8B%E7%9A%84%E6%95%99%E7%A8%8B%E5%90%97%EF%BC%8C%E7%BB%99%E6%88%91%E4%B8%80%E4%BB%BD%E5%A5%BD%E5%90%97%EF%BC%8C%E6%84%9F%E6%BF%80%E4%B8%8D%E5%B0%BD.png)
![JS正则：'abc01'.match(^(abc[d]+))为什么返回两个值？](/aiimages/JS%E6%AD%A3%E5%88%99%EF%BC%9A%26%23039%3Babc01%26%23039%3B.match%28%5E%28abc%5Bd%5D%2B%29%29%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%94%E5%9B%9E%E4%B8%A4%E4%B8%AA%E5%80%BC%EF%BC%9F.png)
