CSS实现DIV超长截断,并显示...
DIV显示内容有时会超长,并把页面撑的很难看,
以前的做法是在JS中,或者后台判断其长度,过长就截断,
但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值,
展示的效果也不好。利用CSS提供的方法,可以完美的解决该问题。
.project-Name{
width:280px;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
这里宽度是必须定义的,
overflow:hidden;表示超长部分不显示
text-overflow:ellipsis;表示超长显示...
white-space: nowrap;表示不折行显示 该样式也可以应用于其他一些标签,最好在可以加TITLE的标签上使用,
因为可以加TITLE显示全部的信息哦
CSS实现DIV超长截断,并显示...的更多相关文章
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- WPF TextBlock 文字超长截断并显示省略符号
<TextBlock x:Name=" FontSize="9pt" Margin="0 2 0 0 " VerticalAlignment=& ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- css:多个div在同一行显示
使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...
- 用CSS让字体在一行内显示不换行(收藏)
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): .text- ...
- 用CSS让字体在一行内显示不换行
青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小 当一行文字超过DIV或者Table的宽度的时候,浏览器 ...
- CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...
随机推荐
- Oracle补习班第一天
My life is a straight line, turning only for you. 我的人生是一条直线,为你转弯
- git服务器新增仓库
在已有的git库中搭建新的库,并将本地的git仓库,上传到服务器的git库中,从而开始一个新的项目. 首先是在本地操作: 在本地新建文件夹spider,进入到spider中:如下
- printf 整数类型都用 uint8_t
#include <iostream> #include <string> #include <tuple> #include <utility> ...
- jQuery MiniUI开发系列之:数据验证
在开发应用系统界面时,往往需要进行很多.复杂的数据验证,当填写的数据符合规定,才能提交保存. jQuery MiniUI提供了比较完美的表单数据验证和错误显示的方式. 常见的表单控件,都有一个验证事件 ...
- ipad2 恢复
1.用原装充电线连接电脑,并打开itunes~2.同时按住电源键和home键 10秒左右,直到白苹果画面变成黑屏3.按住home键~但要松开电源键,继续等待~直到ipad出现画面(如图) 4.这时候, ...
- VMware Workstation 11, 客户机Ubuntu14.04.1 LTS 64bit,宿主机Windows 8.1 64bit,剪贴板共享(copy and paste)失效问题
Ubuntu14.04是从12.04升级上来的,因为GUI性能的原因相继装了Xubunbu和Lubuntu的包(Lubuntu的桌面果然轻量级,但是请神容易送神难,卸载Xubuntu很麻烦,就先放下了 ...
- Delphi DateUtils时间单元
Uses DateUtils //时间单元,非常有用. 记得引用这个单元,不然不能用. CompareDate 比较两个日期时间值日期部分的大小 CompareDateTime 比较两个日期时间值的大 ...
- 使用 Google Web Fonts
Google Fonts 的介绍:Google Fonts 并不是简单的字体下载站 Google Fonts 地址:https://www.google.com/fonts 左上角可以输入查找的字体名 ...
- JVM & Server & Connector & Context Relationship
- xampp3.2下mysql中文乱码终极解决方案
xmapp3.2.2中mysql已经被替换成了Mariadb,网上那些显示char语句已经失灵. 另外本文主要介绍的是手动在mysql中写入中文乱码问题 那么我们将采用如下三个步骤解决乱码问题 1.打 ...