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 ...
随机推荐
- 【巩固】JS中的封闭空间
封闭空间的主要思想在于: JS中给一个变量外面加小括号,是不改变任何结果的.比如 var show = function(){ //定义一个名字为show的函数 ); }; show(); //调用名 ...
- php中序列化与反序列化
解析PHP多种序列化与反序列化的方法 序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更 ...
- Nexus3.0.0+Maven的使用(三)
这章主要讲怎么和Maven做集成,集成的方式主要分以下种情况:代理中央仓库.Snapshot包的管理.Release包的管理.第三方Jar上传到Nexus上 1 代理中央仓库 只要在PMO文件中配置 ...
- android 代码生成selector drawable
public static StateListDrawable makeSelector(Context context, int idNormal, int idPressed, int idFoc ...
- nyoj 708 ones 动态规划
http://acm.nyist.net/JudgeOnline/problem.php?pid=708 状态转移方程的思路:对于一个数N,可以是N - 1的状态+1 得到,另外,也可以是(n / 2 ...
- Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局
1.textview 垂直水平居中的设置 Android:gravity="center_vertical|center" 2.LinearLayout中设置控件垂直布局,默认的是 ...
- ngrok 配置
安装git 1.安装git,我安装的是2.6版本,防止会出现另一个错误,安装git所需要的依赖包 yum -y install zlib-devel openssl-devel perl hg cpi ...
- C#泛型代理、泛型接口、泛型类型、泛型方法
//http://www.cnblogs.com/JeffreySun/archive/2012/11/14/2770211.html //http://www.baqima.com/a/2628.h ...
- 批量Clip
没有建立对应dataset,直接生成featureclass,主要是工作中没几个dataset. # -*- coding: utf-8 -*-__author__ = 'tanshuai' impo ...
- android微信分享要注意的地方
最近在做android端分享的功能,在微信开放平台查看了下官网上的开发文档,一步一步的按文档上的步骤来: 1.申请你的AppID 2.下载开发工具包 3.搭建开发环境,引入libammsdk.jar文 ...