超出隐藏兼容H5
常用的字体超出隐藏不能兼容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的更多相关文章
- table中的td内容超出隐藏
<table style="table-layout: fixed;width: XXX px"> <tr> <td style="whit ...
- CSS 超出隐藏问题
.dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...
- line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- 前端生成分享海报兼容H5和小程序
### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- css样式之超出隐藏
文本超出部分隐藏,总结两种方法. 1.单行隐藏 html代码 <div class="mi">当文字超过范围的时候,超出部分会隐藏起来.</div> css ...
随机推荐
- VGG(2014),3x3卷积的胜利
目录 写在前面 网络结构 multi-scale training and testing 其他有意思的点 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 VGG(2 ...
- hibernate 搭建框架
需要用的包 Hibernate的日志记录: * Hibernate日志记录使用了一个slf4j: * SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具 ...
- 一个纯CSS实现的卡片翻转效果
先上代码 <div id="box"> <div class="front">正面</div> <div class= ...
- Orecle基本概述(1)
Orecle1.什么是orecle及体系结构?* 全局数据库,指物理磁盘数据库,一个真实存在的磁盘目录.*用户: 用户在oracle里面是用来隔离数据的*表空间: 逻辑结构,不可视的,虚拟的,用户的数 ...
- Flash安全总结
ActionScript AS是基于ECMAScript的语言,为了交互的需要flash应用引入ActionScript.ActionScript一共有三个版本,其中3.0较之前两个版本变化很大.Ac ...
- 转 NAT技术详解
NAT产生背景 今天,无数快乐的互联网用户在尽情享受Internet带来的乐趣.他们浏览新闻,搜索资料,下载软件,广交新朋,分享信息,甚至于足不出户获取一切日用所需.企业利用互联网发布信息,传递资料和 ...
- [Luogu3878] [TJOI2010]分金币
题目描述 现在有n枚金币,它们可能会有不同的价值,现在要把它们分成两部分,要求这两部分金币数目之差不超过1,问这样分成的两部分金币的价值之差最小是多少? 输入输出格式 输入格式: 每个输入文件中包含多 ...
- 9i oracle数据库迁移到11G(exp)
这个是之前生产上打算迁移的文档,后面离职了没有在停机迁移,但是测试过几次没有问题,其中需要把9I的110,120库迁移到11g一个数据库中,但是110,120库之间有相同的表名字,以及有DBLINK. ...
- 查看线上日志利器less
less实用命令 搜索 很多关于命令的解释有点令人困惑,因为前字,forward是向前,before也是前面. 上表示backward 下表示forward 向下搜索 / - 使用一个模式进行搜索,并 ...
- [最新方法]终于解决了 Ubuntu 14.04 网络图标不见了 的问题|Ubuntu14.04 网络图标消失
解决 Ubuntu 14.04 网络图标不见了 消失的问题 这个问题困扰了我大半年了.但是我就硬是不想重新装系统.搜索研究一番发现,这个问题是nm-applet的问题. 然后偶然发现nm-ap ...