解说一中的方法不兼容火狐、IE浏览器，所以解说二会给出通用的css写法。
原理：两个盒子a、b，文字内容放于盒子b，固定盒子a的高度及行高，超出a的内容隐藏，在结尾处放置省略号，如下图，红线圈出部分用省略号覆盖。
.a{ width: 300px; /*想要显示几行，高度就是行高*倍数*/ height: 52px; line-height: 26px; overflow: hidden; border: 1px solid #ddd; } .a::before{ float: left; width: 5px; content: ''; } .a::after{ height: 26px; content: "..."; line-height: 26px; width: 3em;/* 省略号宽度 */ margin-left: -1em;/* 使省略号在文字的最末端 */ position: relative; top: 26px; left: 100%; background-color: #fff; } .b{ float: right; margin-left: -5px; width: 100%; line-height: 26px; word-break: break-all; }<div class="a"> <div class="b">在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，着实影响美观，这个时候，就需要用css对其进行处理。下面的方法是我在实际工作中总结出来的，给大家参考一下。</div></div>超出盒子a的内容都被隐藏掉了，在第二行结尾处，用‘...’覆盖了其他的文字，效果如下图所示：
这个方法存在的问题是：使用的文字的格式，内容的不同，有可能放置的省略号的位置可能不会那么正好合适，如果有更合理的方式，欢迎留言解答。如下图所示：