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

news2025/6/9 23:02:20

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

 解决措施:

特别注意:

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.coloradmin.cn/o/334143.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ARM uboot源码分析1-启动第一阶段

一、start.S 引入 1、u-boot.lds 中找到 start.S 入口 (1) 在 C 语言中整个项目的入口就是 main 函数&#xff08;这是 C 语言规定的&#xff09;&#xff0c;所以譬如说一个有 10000 个.c 文件的项目&#xff0c;第一个要分析的文件就是包含了 main 函数的那个文件。 (2) 在…

分享75个JS焦点图代码,总有一款适合您

分享75个JS焦点图代码&#xff0c;总有一款适合您 75个JS焦点图代码下载链接&#xff1a;https://pan.baidu.com/s/1WuydBKN3eYd3H64lPXv0Fw?pwd0nq7 提取码&#xff1a;0nq7 Python采集代码下载链接&#xff1a;https://wwgn.lanzoul.com/iKGwb0kye3wj base_url "…

MySQL面试题:关系型数据库SQL和非关系型数据库NoSQL

文章目录一、四大非关系型数据库与关系型数据库的对比1. 关系型数据库2. 基于列的数据库3. 键值对存储4. 文档存储5. 图形数据库参考文章&#xff08;金文&#xff09;&#xff1a;四大非关系型数据库类型&#xff0c;你知道多少 参考文章&#xff1a;“行式存储”和“列式存储…

2022虎符CTF-WEB赛后复现

1、ezphp 参考Jacko师傅的这篇虎符CTF 写的已经很详细了&#xff0c;先简单梳理一下题目&#xff0c;题目与P师傅的这篇文章类似我是如何利用环境变量注入执行任意命令。简单来说就是不同的系统&#xff0c;他的system命令调用的命令不同。 php中调用system本质上是调用了sh…

UDP报文结构

UDP协议 基本特点&#xff1a;无连接、不可靠传输、面向数据报、全双工 UDP协议报文结构 &#xff0c;以下分别是种画法 对上图进行解释&#xff1a; UDP就会把载荷数据&#xff08;就通过UDP socket ,也就是send方法拿来的数据&#xff0c;基础上再在前面拼接上几个字节的…

appium ios真机自动化环境搭建运行(送源码)

appium ios真机自动化环境搭建&运行&#xff08;送源码&#xff09; 目录&#xff1a;导读 &#xff08;1&#xff09;安装JDK&#xff0c;并配置环境变量&#xff0c;方法如下&#xff1a; &#xff08;2&#xff09;安装Xcode、Xcode commandline tools和iOS模拟器 &…

如何判断反馈电路的类型-反馈类型-三极管

如何判断反馈电路的类型 反馈电路类型很多&#xff0c;可根据不同的标准分类&#xff1a; ①根据反馈的极性分&#xff1a;有正反馈和负反馈。 ②根据反馈信号和输出信号的关系分&#xff1a;有电压反馈和电流反馈。 ③根据反馈信号和输入信号的关系分&#xff1a;有串联反…

渗透测试 -- IP、端口信息收集

数据来源 01 IP信息收集 1&#xff09;IP反查域名 同IP网站查询&#xff0c;同服务器网站查询 - 站长工具 专业精准的IP库服务商_IPIP 2&#xff09;域名查询IP IP/IPv6查询&#xff0c;服务器地址查询 - 站长工具 或直接 ping 一下域名就会返回IP 3&#xff09;CDN 如…

补天平台安全问题收录情况分享记录

声明 本文是学习2017年上半年 补天平台漏洞收录分析报告. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 补天平台及补天白帽大会介绍 “补天平台”&#xff0c;成立于2013年3月&#xff0c;全称为“补天漏洞响应平台”。平台旨在收集散落在民间的安…

MySQL8.0之前实现row_number以及计算玩家连续登录天数

使用MySQL 5.7版本统计 玩家连续登录天数 原始数据 玩家同一天多次登录只保留一条 select DISTINCT(FROM_UNIXTIME(login_time,%Y-%m-%d)) as login_date,rid from t_log_login order by rid; 借助两个变量统计每个玩家登录日期对应的次数 SELECT * FROM(SELECT DISTINCT …

云镜CVE-2022-25578复现

CVE-2022-25578复现漏洞信息漏洞复现读取flag&#x1f349; shell来源&#xff1a;https://yunjing.ichunqiu.com/cve/detail/960?type1&pay2漏洞信息 漏洞名称taocms v3.0.2允许攻击者通过编辑.htaccess文件执行任意代码漏洞编号CVE-2022-25578危害等级超危漏洞类型任意…

day34|343. 整数拆分、96.不同的二叉搜索树

343. 整数拆分 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: n 10 输出: 36 解…

电子技术——共栅(共基)放大器

电子技术——共栅&#xff08;共基&#xff09;放大器 在本节我们学习IC中共栅&#xff08;共基&#xff09;放大器的配置&#xff0c;虽然我们之前在分立电路中学习过共栅&#xff08;共基&#xff09;放大器的配置。但是在IC中共栅&#xff08;共基&#xff09;放大器主要作为…

MES系统助力电子厂行业,打造高能效工厂

ES主要包括生产计划系统、工艺管理系统、质量管理系统、生产过程管理系统、设备管理系统、仓储管理系统及数据采集和统计分析系统等。实现生产过程可视化、可追溯。管理人员可以在管理界面对生产实时控制&#xff0c;从而根据需要精准调整生产&#xff0c;达到提高生产效率、缩…

算法与数据结构理解

目录1、数据结构与算法1.1 定义1.2 常见数据结构1.3 常用算法2、插入排序3、希尔排序4、归并排序1、数据结构与算法 1.1 定义 数据结构&#xff1a;是计算机中存储、组织数据的方式。具有一定逻辑关系&#xff0c;应用某种存储结构&#xff0c;并且封装了相应操作的数据元素集…

HTML浪漫动态表白代码+音乐(附源码)

HTML浪漫表白求爱(附源码)&#xff0c;内含4款浪漫的表白源码&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;求爱场景&#xff0c;下载直接使用。 直接上源码吧 一.红色爱心 1.效果 实际效果是动态的哦 2.源码 复制粘贴即可运行哦 <!DOCTYPE…

JVM 线程本地分配缓存TLAB

什么是TLAB 从内存模型而不是垃圾收集的角度&#xff0c;对 Eden 区域继续进行划分&#xff0c;JVM 为每个线程分配了一个私有缓存区域&#xff0c;它包含在 Eden 空间内 多线程同时分配内存时&#xff0c;使用 TLAB 可以避免一系列的非线程安全问题&#xff0c;同时还能提升…

一文读懂CXL协议

2001年&#xff0c;英特尔公布了第三代I/O技术——3GIO技术&#xff08;后更名为PCI Express&#xff0c;即PCIe&#xff09;&#xff0c;以高性能、高扩展性、高可靠性及出色的兼容性取代了包括AGP和PCI在内所有的内部总线并且不断升格。例如&#xff0c;2019年5月底公布的PCI…

JUC锁与AQS技术【我的Android开发技术】

JUC锁与AQS技术【我的Android开发技术】 AQS原理 AQS就是一个同步器&#xff0c;要做的事情就相当于一个锁&#xff0c;所以就会有两个动作&#xff1a;一个是获取&#xff0c;一个是释放。获取释放的时候该有一个东西来记住他是被用还是没被用&#xff0c;这个东西就是一个状…

六、Linux文件 - lseek函数

目录 1.lseek函数 2.lseek函数实战 2.1宏SEEK_CUR的用法 2.2宏SEEK_END的用法 3.Open函数实战 - O_APPEND的用法 4.Linux在库函数中寻找相应的宏定义 1.lseek函数 off_t lseek(int fd,off_t offset,int whence);光标的偏移量 fd:文件描述符offset:偏移量whence: SEEK_…