常用的字体超出隐藏不能兼容H5和ios

所以整理了两种用jquery来实现的方法,然后弊端是只能隐藏指定字数不能段落隐藏

方法一、

//超出隐藏兼容ios
function hide(text,nuber) {
var array = [];
$(text).each(function(){
var content=$.trim($(this).text());//去掉前后文空格
array.push(content);//内容放进数组
})
for(var i=0;i<array.length;i++){
if(array[i].length>=nuber){
//如果数组长度(也就是文本长度)大于等于50(数字可自己定义)
content=array[i].substr(0,nuber)+'...';//添加省略号并放进box文字内容后面
console.log(content)
$(text).eq(i).text(content);
}else{
content=content_arr[i];
$(text).eq(i).text(content);
console.log(content)
}
}

}

//hide(".xxx",12)

方法二、

function hidetext(idclass,nuber){
$(document).ready(function () {
//限制字符个数
$(idclass).each(function () {
const maxnum = nuber;
if ($(this).text().length > maxnum) {
$(this).text($(this).text().substring(0, maxnum));
$(this).html($(this).html() + '...');
}
});
});
}
hidetext(".hide_text2","14")

超出隐藏兼容H5的更多相关文章

  1. table中的td内容超出隐藏

    <table style="table-layout: fixed;width: XXX px"> <tr> <td style="whit ...

  2. CSS 超出隐藏问题

    .dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...

  3. line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...

  4. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

  5. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  6. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  7. 前端生成分享海报兼容H5和小程序

    ### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

  8. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  9. css样式之超出隐藏

    文本超出部分隐藏,总结两种方法. 1.单行隐藏 html代码 <div class="mi">当文字超过范围的时候,超出部分会隐藏起来.</div> css ...

随机推荐

  1. Github | 吴恩达新书《Machine Learning Yearning》完整中文版开源

    最近开源了周志华老师的西瓜书<机器学习>纯手推笔记: 博士笔记 | 周志华<机器学习>手推笔记第一章思维导图 [博士笔记 | 周志华<机器学习>手推笔记第二章&qu ...

  2. css3:bacground-size

    个人博客: https://chenjiahao.xyz CSS3之背景尺寸Background-size是CSS3中新加的一个有关背景的属性,这个属性是改变背景尺寸的通过各种不同是属性值改变背景尺寸 ...

  3. .NetCore WebApi —— Swagger版本控制

    目录: .NetCore WebApi——Swagger简单配置 .NetCore WebApi——基于JWT的简单身份认证与授权(Swagger) .NetCore WebApi —— Swagge ...

  4. 02-16 k近邻算法

    目录 k近邻算法 一.k近邻算法学习目标 二.k近邻算法引入 三.k近邻算法详解 3.1 k近邻算法三要素 3.1.1 k值的选择 3.1.2 最近邻算法 3.1.3 距离度量的方式 3.1.4 分类 ...

  5. SystemVerilog Assertion 设计、调试、测试总结(2)

    上一篇博客主要写了SVA的基本语法(详细),这一篇主要写SVA语法总结,以及如何查看SVA波形等. 断言assertion被放在verilog设计中,方便在仿真时查看异常情况.当异常出现时,断言会报警 ...

  6. drf框架中jwt认证,以及自定义jwt认证

    0909自我总结 drf框架中jwt 一.模块的安装 官方:http://getblimp.github.io/django-rest-framework-jwt/ 他是个第三方的开源项目 安装:pi ...

  7. PHP compact

    1.函数的作用:将变量转成数组 2.函数的参数: @params string $varname1 @params string $varname2 ... @params array $varnam ...

  8. [Luogu2458][SDOI2006]保安站岗

    题目描述 五一来临,某地下超市为了便于疏通和指挥密集的人员和车辆,以免造成超市内的混乱和拥挤,准备临时从外单位调用部分保安来维持交通秩序. 已知整个地下超市的所有通道呈一棵树的形状:某些通道之间可以互 ...

  9. 算法---ALGO-3 Java K好数 蓝桥杯

    package Main; import java.io.InputStream; import java.util.Scanner; public class Main { public stati ...

  10. Halcon一日一练:创建AOI

    AOI:Area Of Interesting.感兴趣区域,即你要处理的区域. 一般情况,一整张图像,我们需要对局部进行操作,我们会选择一个我们需要处理的区域,对其进行处理,其他区域进行屏蔽.这个区域 ...