fastadmin后台表单文字过长,限制显示,鼠标悬停显示全部

news/2024/4/28 1:46:36/文章来源:https://blog.csdn.net/qq_53457276/article/details/128949896

问题:显示文字区域过长,影响用户体验感

 解决措施:

特别注意:

return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.contents + "'>" + value + "</span>";
其中标红的区域需要根据自己数据库中的字段进行修改
{field: 'contents', title: __('Contents'), operate: 'LIKE',formatter : function(value, row, index, field){return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + row.contents + "'>" + value + "</span>";},cellStyle : function(value, row, index, field) {return {css: {"white-space": "nowrap","text-overflow": "ellipsis","overflow": "hidden","max-width": "150px"}};}
},

 因为律所介绍以及某些商品的介绍是很长的,如果不限制显示字数会导致几百甚至几千文字一行显示,很大程度上影响了用户的体验感并且很难显示到后面的字段

解释css所使用到的样式

1、text-overflow: ellipsis; 

这里的重点样式是  text-overflow: ellipsis;

不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号(text-overflow: ellipsis)。

2、white-space

顺便解释一下white-space的用法

white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 或<br>无论white-space设置什么都会有空格或回车。)

下面是wschool上white-space可能的值:

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列,但是正常地进行换行。

pre-line 合并空白符序列,但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_255834.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【物联网平台选型】葵花宝典:盘点开源、SaaS及通用型平台的优劣势和选型适配

随着工业物联网领域和智慧物联领域的发展&#xff0c;大大小小的物联项目和物联场景需求层出不穷&#xff0c;物联网平台作为技术底座型软件&#xff0c;是不可或缺的项目地基。 市场需求下&#xff0c;物联网平台提供商越来越多&#xff0c;“打地基”的方式大体分为开源平台、…

内核数据结构-XArray

内核数据结构-XArrayXArray简介XArray 基本数据结构Xarray结构图API介绍Xarray锁参考链接XArray简介 XArray是一种抽象数据类型&#xff0c;类似于一个大的指针数组&#xff0c;它满足了许多与哈希或常规可调整大小数组相同的需求。由于 xarray 中的数据都是指针&#xff0c;使…

以太网知识-GMII / RGMII接口

今天和海翎光电的小编一起分析MII/RMII/SMII&#xff0c;以及GMII/RGMII/SGMII接口的信号定义&#xff0c;及相关知识&#xff0c;同时小编也对RJ-45接口进行了总结&#xff0c;分析了在10/100模式下和1000M模式下的连接方法。GMII 接口分析GMII接口提供了8位数据通道&#xff…

shell条件测试

文章目录三、shell条件测试3.1条件测试的基本语法3.2 文件测试表达式3.3字符串测试表达式3.4 整数测试表达式3.5 逻辑操作符三、shell条件测试 为了能够正确处理Shell程序运行过程中遇到的各种情况&#xff0c;Linux Shell提供了一组测试运算符。通过这些运算符&#xff0c;Sh…

go语言的并发编程

并发编程是 Go语言的一个重要特性,而 go语言也是基于此而设计出来的。 本文将会介绍如何使用go-gc中的“runtime”方法实现 go语言中的并发编程。 在之前的文章中,我们已经对 runtime方法进行了详细介绍,这次文章将对 runtime方法进行深入分析,并讲解如何在go-gc中使用该方…

智能建筑电力监控自动化的解决方案

引言 安科瑞 李亚俊 壹捌柒贰壹零玖捌柒伍柒 所谓智能建筑就是采用计算机技术和通讯技术对建筑的设备进行自动监控&#xff0c;对信息资源进行管理和为用户提供信息服务等。美国智能建筑研究机构把智能建筑定义为&#xff1a;通过对建筑物的结构、系统、服务和管理四个基本要…

数据库模式(schema)是什么?

在数据库的术语中&#xff0c;模式&#xff08;schema&#xff09;是一个逻辑概念&#xff0c;用于组织数据库中的对象。模式中的对象通常包括表、索引、数据类型、序列、视图、存储过程、主键、外键等等。 模式可以为数据库对象提供逻辑隔离功能&#xff0c;不用应用程序可以…

负载均衡下的webshell上传

负载均衡下的webshell上传1.应用场景2.面临的困难2.1 shell文件上传问题2.2 命令执行时的漂移2.3 大工具投放失败2.4 内网穿透工具失效3.一些解决方案3.1 关机3.2 基于IP判断执行主机3.3 脚本实现web层的流量转发3.3.1 创建antproxy.jsp脚本3.3.2 修改 Shell 配置4.总结1.应用场…

开发必看!三分钟读懂Salesforce SOQL查询和限制

SOQL是支持我们与Salesforce数据库交互的查询语言。开发人员在编写Apex时通常会使用到SOQL&#xff0c;此外&#xff0c;它还允许管理员和开发人员从组织内部检索数据并在导出结果时生成强大的数据报告。 SOQL 查询对于编写代码的开发人员&#xff0c;以及通过使用子句扩展查询…

STM32 复用JLink下载线输出调试信息

编写STM32程序时&#xff0c;要输出调试信息的话&#xff0c;一般是通过一个串口输出&#xff0c;电脑端使用串口调试助手显示调试信息。这样的话&#xff0c;就需要占用一个串口资源。还有一种SEGGER的RTT方式&#xff0c;直接使用JLink下载线输出调试信息&#xff0c;这样可以…

在线支付系列【21】微信支付服务商接入前准备

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 文章目录项目概述接入准备1. 注册服务商号&#xff08;获取服务商mchid&#xff09;2. 注册公众号&#xff08;获取服务商APPID&#xff09;3. 绑定应用ID和服务商ID4. 入驻子商户&#xff08;特约商户进…

使用Jmeter抓取手机APP报文并进行APP接口测试

Jmeter是一个比较常用的接口测试工具&#xff0c;尤其是接口性能测试。当然它也可以用来测试手机APP的HTTP接口&#xff0c;我在Fiddler抓取手机APP报文 和 接口测试代理工具charles mock测试 分别介绍了Fiddler和charles 如何抓取APP报文&#xff0c;本文介绍使用Jmeter来抓取…

内网渗透(十三)之内网信息收集-收集域环境中的基本信息

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…

Jmeter之实现参数化的不同方式详解

参数化简介 定义&#xff1a;动态的获取、设置或生成数据&#xff0c;是一种由程序驱动代替人工驱动的数据设计方案&#xff0c;提高脚本的编写效率以及编写质量 适用场景&#xff1a;当提交的数据量较大时&#xff0c;每次修改太麻烦&#xff0c;可以使用参数化 本文介绍实现…

linux yum安装卸载jdk8

1>安装1 yum -y list java* 列出jdk列表2 yum install -y java-1.8.0-openjdk-demo.x86_64&#xff08;安装这个java -version 正常显示&#xff0c;但是javac不能用&#xff0c;因为yum install java 只是安装了java的运行时环境&#xff0c;并不支持编译&#xff0c;安装成…

NLP学习——信息抽取

信息抽取 自动从半结构或无结构的文本中抽取出结构化信息的任务。常见的信息抽取任务有三类&#xff1a;实体抽取、关系抽取、事件抽取。 1、实体抽取 从一段文本中抽取出文本内容并识别为预定义的类别。 实体抽取任务中的复杂问题&#xff1a; 重复嵌套&#xff0c;原文中…

使用openai-whisper 语音转文字

前言&#xff1a;最近由于ChatGPT 的大热&#xff0c;AI 应用领域再次进入大众的视线&#xff0c;今天介绍一款AI应用whisper 可以较为准确的将人声转换为文字&#xff08;支持多国语言&#xff09;一、安装安装有两种方式pip 和源码编译安装&#xff0c;这里介绍pip安装方式安…

欧盟砍伐森林法规和遵守情况 用Dimitra技术解决森林砍伐问题

两千年前&#xff0c;西欧有80%的地区被列为森林。今天&#xff0c;这个数字只有34%。森林砍伐影响着这个星球上的每个人。它造成了大约10%的全球变暖。如果不设法解决森林砍伐问题&#xff0c;就不可能应对全球变暖。 毁林是有目的的清除林地的行为。此外&#xff0c;工业化农…

cmd常用的操作命令

使用windows系统&#xff0c;通常在cmd中输入指令&#xff0c;会调用相应的一些程序或者执行一些功能&#xff0c;学会使用CMD中的命令&#xff0c;可以加快我们一些操作&#xff0c;省时省力。 ipconfig ------查询IP地址 gpedit.msc-----组策略 sndrec32-------录音机 Nsloo…

ClickHouse 合并树表引擎 MergeTree 索引与数据存储方式

目录 1. 一级索引 1.1 稀疏索引 1.2 索引粒度 1.3 索引数据的生成规则 1.4 索引的查询过程 2. 二级索引 2.1 granularity 与 index_granularity 2.2 跳数索引的生成规则