超出隐藏兼容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 ...
随机推荐
- Java读源码之Object
前言 JDK版本: 1.8 最近想看看jdk源码提高下技术深度(比较闲),万物皆对象,虽然Object大多native方法但还是很重要的. 源码 package java.lang; /** * Ja ...
- python编程基础之十四
列表的增加元素 l1 = [10, 20, 30] l1.append(40) # 末尾追加一个值为40的元素 l1.extend([50, 60]) # 末尾追加一系列元素,extend + 可 ...
- Java线程池的底层实现与使用
前言 在我们进行开发的时候,为了充分利用系统资源,我们通常会进行多线程开发,实现起来非常简单,需要使用线程的时候就去创建一个线程(继承Thread类.实现Runnable接口.使用Callable和F ...
- How to Get What You Want 如何得到你想要的
[1]If you want something, give it away. [2]When a farmer wants more seeds, he takes his seeds and gi ...
- F#周报2019年第42期
新闻 TypeShape的性能 .NET Core 3.0包含.NET Framework API移植项目 宣告.NET Core 3.1预览版1 .NET Core 3.1预览版1中ASP.NET ...
- 小白学 Python(2):基础数据类型(上)
人生苦短,我选Python 引言 前文传送门 小白学 Python(1):开篇 接触一门新的语言,肯定要先了解它的基础数据类型.啥?你问我为啥要先了解基础数据类型? 为了你的生命安全,还是乖乖听我 B ...
- C#输入中文实现转拼音首字母(亲测,字库不全)
public string GetPYString(string str) { string tempStr = ""; foreach (char c in str) { if ...
- Windows系统调用中API从3环到0环(上)
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html Windows系统调用中API从3环到0环(上) 如果对API在三 ...
- JDBC-第1篇-基础
话不多说,直接开撸代码. 1.首先自己的环境使用的是maven项目+idea工具+mysql8.0.18 (使用maven项目的好处就是方便,不用手动导入相关的驱动包,在pom.xml配置即可) 2. ...
- SQLMAP SSI注入错误解决
记一次SQL注入 目标地址:https://www.xxxx.com/ 之前补天提交过这个注入 后来貌似”修复了”(实际就是装了安全狗和过滤了一些关键字) 不过今天试了下 还是可以注入 可以看到已经 ...