zoukankan      html  css  js  c++  java
  • 前端限制显示的文本字数的几种方法——不换行与换行

    一,使用Vue限制文本字数长度的方式(不换行)

    使用vue中的过滤器filter(使用本方式的特点:只是限制了文本的长度,但是有时候8个字母的长度与8个文字的长度会有一定的差距)

    下面是相同长度的字母与文字的差距:
    ijustlovedoit... 我喜欢编程你喜欢你什么呢...
    <span class="icon">{{item.title | ellipsis}}</span>

    定义过滤器:

    export default {
      title: 'xx',
      filters: {
        ellipsis (value) {
          if (!value) return ''
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      }
    }
    

      二、使用Css限制文本字数长度的方式(不换行)

    使用css中的选择器来限制文字的长度(使用本方式的特点:超出设置的宽度之后的文字会显示为...)

    .line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //文本不换行,这样超出一行的部分被截取,显示...
    }

     三、使用Css限制文本字数长度的方式(换行)

    使用css中的选择器来限制文字的长度(使用本方式的特点:超出设置的宽度之后的文字会显示为...)

    {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;(这里是行数 你可以控制你想在第几行末尾多余的显示省略号,之前的文本正常显示)
    }
    

      

  • 相关阅读:
    iOS14
    iOS 音量键翻页实现
    pod 相关写法
    js 递归树结构数据查找指定元素的所有父级
    前端实现访问一个图片URL直接下载该图片
    HTML5 drag api 的使用
    vue 组件的 patch
    centos7安装nginx
    nginx常用配置说明
    遍历删除
  • 原文地址:https://www.cnblogs.com/lsy2019/p/10914843.html
Copyright © 2011-2022 走看看