在网页设计中，经常需要用到多行文本的展示，但是当文本内容过长时，它会超出预设的宽度限制，导致布局混乱。为了避免这种情况，我们需要将多余的文本进行省略，展示出省略号，来增加整体的美观性和用户体验。事实上，采用css样式来实现这一效果非常简单，接下来我们将介绍常用的几种方法。
方法一：单行居中省略号这种方法最简单，适用于只有一行文本内容。我们可以通过以下两行css代码实现：
overflow: hidden;text-overflow: ellipsis;
overflow为隐藏超过宽度限制的文本，text-overflow为超出后的表现方式，这里使用的是省略号。然而，这两行代码有一个限制，只适用于单行省略。如果文本有多个行，我们需要使用其他方法。
方法二：多行两端对齐省略号这个方法允许多行文本，并且每行文本最后一个单词的末尾处出现省略号。这里的关键在于使用display: -webkit-box;来将文本容器转换成一个伸缩盒子：
.box { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 限制显示的行数}
其中，-webkit-line-clamp表示限定文本显示的最大行数。如果想要显示更多行，只要把数字改大即可。
这种方法的缺点是只有支持webkit内核的浏览器才能使用，所以在兼容性方面需要特别注意。
方法三：多行省略号+鼠标悬浮显示全文这种方法类似于“阅读全文”按钮，当用户将鼠标指针悬停在文本上时，全文才会显示。首先，我们需要将文本限定在容器的高度范围内，超出的文本被隐藏。然后，我们可以通过javascript的mouseenter和mouseleave事件来控制文本的显示和隐藏。
对于css部分，我们可以通过以下代码来实现：
.text { display: -webkit-box; -webkit-line-clamp: 3; //限定显示行数 -webkit-box-orient: vertical; overflow: hidden;}.show-text { display: block; cursor: pointer;}
用js实现事件的绑定及文本的显示与隐藏：
var text = document.queryselector('.text');var textheight = window.getcomputedstyle(text).height;if(parseint(textheight) < text.scrollheight) { text.classlist.add('show-text'); text.addeventlistener('mouseenter', function() { text.classlist.remove('text'); }); text.addeventlistener('mouseleave', function() { text.classlist.add('text'); });}
这种方法可以更好地控制文本的显示和隐藏，提升用户的体验，但是需要耗费更多的编码时间和动态效果实现。
方法四：使用vue.js中的过滤器vue.js是一种前端框架，可以实现数据的双向绑定和页面的动态响应。在vue.js中，我们可以通过过滤器实现多行省略号的效果。如下代码所示：
<p v-html="text | multilineellipsis(3)"></p>
其中，v-html指令用于渲染文本内容，pipeline符号“|”用于协调过滤器和表达式。过滤器可以在vue.js实例中定义，如下所示：
vue.filter('multilineellipsis', function(text, lines) { var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and']; var reg = new regexp(`(?:(?<=(^|(.{2,}?\w)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\w]$))`, 'g'); var len = 0; var result = ''; var linecount = 0; while(len <= text.length && linecount < lines) { var match = reg.exec(text.slice(len)); if(match && match.groups.line) { result += match.groups.line; len += match[0].length; } else { break; } if(len < text.length) { var nextchar = text[len]; if(nextchar !== ' ' && nextchar !== '' && nextchar !== '') { result += '...'; break; } } linecount++; } if(len < text.length) { result += '...'; } return result;});
这个过滤器比较复杂，他会在文本中进行正则匹配，将每行符合要求的文本转换为对应的html，并保留省略号。这个过滤器还会你参照了常见英文单词的列表来制定正则表达式，提高了文本显示的质量。
结尾以上就是实现css多行省略号的几种方法，开发者们可根据具体需求来选择合适的方法。其中，使用vue.js过滤器的实现比较新颖和流行，有越来越多的开发者采用。不管采用哪种方法，都要注意兼容性以及动态响应性，在给用户最好体验的前提下加强网站的整体美观性。
以上就是css多行超出省略号的详细内容。