DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法。

注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用。

首先可以给此DIV指定3个关键样式{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

指定样式后,文本超长已经会显示省略号了。如果想鼠标移上去显示全文的话,有2个办法:

一个是把全部文本写在div的title属性里面,还有一个办法是在原来样式的基础上再写一个鼠标移上去的样式,去掉省略号。

具体参考代码如下(建议把方法和样式都定义成公共的,以便代码复用):

    /* 文本超长class */
    .textEllipsis{
        color:red;
        overflow: hidden;/*不允许滚动条*/
        white-space: nowrap;/*不允许文本换行*/
        text-overflow: ellipsis;/*文本超长显示省略号*/
    }

    /* 鼠标移上,显示全文class */
    .textEllipsis:hover {
        height: auto;
        word-break:break-all;
        white-space: pre-wrap;
        text-decoration: none;
    }

    /* 在列的formatter参数中指定该函数,把全文放入title里面*/
    function contentFormat(value, row, index){
        if(value){
            return "<div title=‘"+value+"‘ class=‘textEllipsis‘>"+value+"</div>";
        }else{
            return ‘‘;
        }
    }

最终效果(如果实际存的文本里面有换行也可以显示):

原文地址:https://www.cnblogs.com/namelessmyth/p/9161820.html

时间: 2024-10-08 16:52:55

DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)的相关文章

关于table里的数据太长超出列宽时,不换行,出省略号,鼠标移上去以后显示全部数据

#t1{ table-layout:fixed; } #t1 td{ text-overflow:ellipsis; overflow:hidden; white-space: nowrap; } 上面是css 1 <table width="670" align="center" border="0" cellpadding="0" cellspacing="0" class="tyouh

超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ width: 100px; overflow: hidden; /*对超出容器的部分强制截取,高度不确定则换行*/ text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本.*/ white-space: nowrap; /*禁止换行*/ } 三.我们还想显示省略掉的,怎么办

内容过长显示省略号 鼠标悬停显示

<!doctype html> <html> <head> <style type="text/css"> //css控制内容过长显示省略号和悬停时显示全部内容 .li1 { list-style:none; width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; margin-top:5px

只要把鼠标移上Div方框,方框就自动顺时针旋转

这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的,有一定参考价值. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3旋转</title><style>.rotate {width:

鼠标移上图片滑出文字提示

本效果演示了一个响应鼠标的提示功能,鼠标移上图片后会滑出一个带背景的提示框,用CSS去控制它的大小和样式,用JS去控制它的滑出和速度,图文混排的时候这个能用得上. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

图片淡入淡出代码,鼠标移上透明度变化

又一个图片透明度特效,鼠标移在图片上,图片的透明度就发生变化,最初的透明度为20,鼠标移上后透明度恢复正常,很明显的响应鼠标的图片特效,而且代码超简单,新手也能学会使用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>石家庄伸缩门</title> </head>

绕过超星学习通鼠标移开自动暂停视频的方法

绕过超星学习通鼠标移开自动暂停视频的方法 说明 原理:通过开发者模式删除鼠标监听事件 安全性:本方法不会被学习通检测以及警告,可放心使用 其他:可以用油猴插件进行自动挂机学习,但被学习通警告的风险较大(该门成绩分数为0) 1. 进入页面 用Google Chrome浏览器打开超星学习通页面,并进入到学生学习页面(其他浏览器大同小异) 2. 进入开发者模式 按下快捷键F12进入开发者模式 3. 打开监听事件 选择Event Listeners事件监听选项卡 4. 选择鼠标监听事件 点击mouseo

鼠标移上,内容显示

1,单纯显示文本内容: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型

适当调整即可变为图片放大镜效果,或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善,推荐在火狐或谷歌中观看). 效果如图: css: .demo {        width: 318px;        margin: 100px auto 0 auto;    } .demo:after {        content: "";        display: block;        height: 0;        clear: both;    } .demo