css文字不换行加省略号

记录一下css文字应用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

时间： 2024-10-12 02:00:55

css文字不换行加省略号的相关文章

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;/* 不换行

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 文字溢出处添加省略号

兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

css——文字超出范围以省略号（...）显示

css部分: overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; width是一个固定宽度. 对于低版本的Firefox,有两种方法解决. 1.使用jQuery ellipsis plugin插件 $(document).ready(function(){ $('.ellipsis').ellipsis(); } 2.使用ellipsis.xml,并与css文件在同一目录下

css文字描述，换行，省略号的一般设置

强制不换行:white-space: nowrap; 强制换行:word-break: break-all; 文字超出范围用省略号:text-overflow: ellipsis;overflow: hidden; 段落换行的一般的设置:设置固定的宽高,然后,设置文字的line-height: 注意:设置line-height:18px;height:18px;text-align:center;文字就会居中

关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <div> <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p> </div> CSS代码: div{ width: 200px; } span{ display: block; width: 200px; ove

css居然有根据容器宽度自动截取长度加省略号功能，强大!!

作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**&

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli