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

一、前言

  当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢?

二、超出范围,对文本进行省略号隐藏

  先上图

  代码很简单

div{
    width: 100px;
    overflow: hidden;        /*对超出容器的部分强制截取,高度不确定则换行*/
    text-overflow: ellipsis;    /*显示省略符号来代表被修剪的文本。*/
    white-space: nowrap;      /*禁止换行*/
 }      

三、我们还想显示省略掉的,怎么办呢

/*方法一:鼠标移上去时直接释放宽度限制
 *弊端是释放宽度岂不是会影响其他元素布局
 */

div:hover{
     width: auto;
}

/*方法二:鼠标移上去时释放overflowd的截取,按照原本样式显示,即换行
 *弊端是换行还是会改变布局,但稍微比上面不换行直接显示好一点
 */

div:hover{
    text-overflow:inherit;
    overflow: visible;
    white-space: pre-line;     /*合并空白符序列,但是保留换行符。*/
}

/*方法三:鼠标移上去时会显示title标签中的文字内容
 *弊端是有点丑,显示速度有点慢,位置也不大好
 */
<div title="超出文字省略显示">超出文字省略显示</div>

方法四:那就是自定义弹出层喽,有点麻烦,好处是自己想怎么显示就怎么显示,想显示什么内容就显示什么内容,毕竟自定义嘛。。。

原文地址:https://www.cnblogs.com/nangezi/p/9091158.html

时间: 2024-11-01 06:22:53

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

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

如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此DIV指定3个关键样式{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} 指定样式后,文本超长已经会显示省略号了.如果想鼠标移上去显示全文的话,有2个办法: 一个是把全部文本写在div的title属性里面,还有一个办法是在原

关于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

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;

CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overfl

CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } </style> <table style="table-layout:fixed; width: 200px;"> <t

设置table中的宽度不随文字改变让其固定

设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28[大 中 小] 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有个不错的方法可以有效解决这个问题 页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了. 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性,其余所有td都是

超过宽度和高度文字会自动隐藏 --费元星

页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了. 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性,其余所有td都是相同的宽度. 这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字会覆盖 解决办法: 在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可

文字超长省略号显示

有的时候,会有超长数据存在而导致显示框装不下的情况. 最开始遇到这种问题时,并不知道 css 中有简单的超长文字省略号显示样式设置,所以进行了很麻烦的 js 操作,记得是使用的 d3 插件绘制树形图,然后获取当前显示框宽度,获取文字大小,计算数据的总共长度,判断是否超长,超长后要减去三个小数点的长度,再对能显示部分数据的截取,拼接三个小数点,达到这种效果,现在想想,真是觉得当初好稚嫩,不过动动脑子处理问题也觉得挺有意思的呢! css 文字超出隐藏设置很简单: 1.有一个最大宽度:max-widt

将过长的文字改用省略号显示

今天项目中有段过长的文字分成几行不美观,于是就想起了能用省略号代替的方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 150px; border: 1px sol