超出隐藏兼容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 ...
随机推荐
- Hbase入门(五)——客户端(Java,Shell,Thrift,Rest,MR,WebUI)
Hbase的客户端有原生java客户端,Hbase Shell,Thrift,Rest,Mapreduce,WebUI等等. 下面是这几种客户端的常见用法. 一.原生Java客户端 原生java客户端 ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
- jsonp 跨域Uncaught SyntaxError: Unexpected token :解决方法
[jQuery]Ajax实现跨域访问JSON Ajax跨域访问JSON 环境:.net4.0+jQuery+JSON.net 因为在跨域实现,所以这里新建网站,这个网站只需要Ashx文件 public ...
- 引入flask_cache时出现ModuleNotFoundError: No module named 'flask.ext'
环境: centos 7.3 python 3.6 flask 1.0.2 flask-cache 0.13.1 引入flask_cache后运行时,出现以下错误 Traceback (most re ...
- String的常见面试题
下面代码,是我前些天在网上搜集的一小部分String的面试题.个人觉得感触很深,希望对大家有所帮助.不好的也请大家批评指正. package com.zys.string; public class ...
- Linux之shell基础
Shell基础 一.shell概述 1) shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用shell来启动.挂起.停止甚至是编写一些程序 ...
- linux使用jq工具解析json
jq类似一个awk或grep一样的神器,可以方便地在命令行操作json 这里我使用海南万宁的天气接口做演示,地址:http://t.weather.sojson.com/api/weather/cit ...
- 简单理解TCP通信的三次握手
TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接. 位码(可以理解为请求状态): 有6种标示:SYN(synchronous建立联机) ACK(acknowledg ...
- Python编程系列---使用装饰器传参+字典实现动态路由
# 实现一个空路由表,利用装饰器将url和功能函数的对应关系自动存到这个字典中 router_dict = {} # 定义一个装饰器 # 再给一层函数定义,用来传入一个参数,这个参数就是访问的页面地址 ...
- mysql数据库limit分页,排序操作
看到网上很多朋友在问,limit分页之后按照字段属性排序的问题,在这里分享一下我的用法: 1.网上答案: 每页显示5个,显示第三页信息,按照年龄从小到大排序 select * from student ...