首页 > web前端 > 前端问答 > css多行超出省略号

css多行超出省略号

PHPz
发布: 2023-05-09 09:17:37
原创
10236 人浏览过

在网页设计中,经常需要用到多行文本的展示,但是当文本内容过长时,它会超出预设的宽度限制,导致布局混乱。为了避免这种情况,我们需要将多余的文本进行省略,展示出省略号,来增加整体的美观性和用户体验。事实上,采用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多行超出省略号的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板