CSS 文字超长省略显示并隐藏超长部分

1.包含文字的元素必须是块级元素，不是块级元素使用display:block使其具有块级元素属性；

2.具备上述基本条件后，css样式如下：

{
    display: block;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

　　如果包含在table的td元素内，td元素需要明确width的百分比，例如：width:20%;

时间： 2024-12-09 21:35:47

CSS 文字超长省略显示并隐藏超长部分的相关文章

css文字超出自动显示省略号

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行

文字超出省略显示为点点

对于文字溢出的解决,若是PC端还好控制,但是在手机端的控制就比较复杂了. 曾尝试用百分比设定宽度,可是却总会撑开,出现滚动条.而尝试用em值,不同手机浏览器的显示效果又不同,切距离看起来会拉的很大. 最后的解决办法: 用jQuery,动态获取屏幕的宽度,然后再按百分比赋值给需要控制溢出的类.最后还不能忘了,溢出超过显示省略号的三个属性,将这个属性所归的类名添加给需要控制的类.这样不管屏幕大小怎么变.每刷新一次就能实现想要的效果. 另外,想要实现页面跳转,不一定要用a标签,用这个即可, <li

css 文字超出部分显示省略号(原)

单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN{ width: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} 兼容写法(但是当文字不够长的时候省略号还是会存在,需要js判断一下) #word

CSS 文字上下颠倒显示

<html><head><title>CSS让文字颠倒显示</title><style type="text/css">.txtUpsideDown { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */ ms-filter: "progid:DXImageTransform.Microsoft.BasicIm

css设置滚动条并显示或隐藏

看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条最后就是想隐藏滚动条代码有滚动条并显示 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body style="width:229px; h

多行文字超出省略显示

.ellipsis-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;word-break:break-all} .ellipsis-1{-webkit-line-clamp:1}

CSS——元素的显示与隐藏

元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除. 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!! display 显示 display 设置或检索对象是否及如何显示. display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外,同时还有显示

文字超长省略号显示

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

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 3行代码搞定,这个很常见.但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制...等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏. text-overflow