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;(这里是行数 你可以控制你想在第几行末尾多余的显示省略号,之前的文本正常显示)
    }
    

      

  • 相关阅读:
    Oracle表空间管理
    Oracle创建函数
    Oracle触发器
    Oracle概要文件
    Oracle结构控制语句
    比较实用的网站
    Java23种设计模式之单例模式
    Java 对象属性的遍历
    JQuery 多个ID对象绑定一个click事件
    好习惯的养成****
  • 原文地址:https://www.cnblogs.com/lsy2019/p/10914843.html
Copyright © 2011-2022 走看看