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超长截断,并显示...的更多相关文章

  1. CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  2. WPF TextBlock 文字超长截断并显示省略符号

    <TextBlock x:Name=" FontSize="9pt" Margin="0 2 0 0 " VerticalAlignment=& ...

  3. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. CSS:使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  5. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  6. css:多个div在同一行显示

    使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...

  7. 用CSS让字体在一行内显示不换行(收藏)

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法   一般的文字截断(适用于内联与块): .text- ...

  8. 用CSS让字体在一行内显示不换行

    青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创 大 | 中 | 小  当一行文字超过DIV或者Table的宽度的时候,浏览器 ...

  9. CSS控制字体在一行内显示不换行

    当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): .text-ov ...

随机推荐

  1. 【巩固】JS中的封闭空间

    封闭空间的主要思想在于: JS中给一个变量外面加小括号,是不改变任何结果的.比如 var show = function(){ //定义一个名字为show的函数 ); }; show(); //调用名 ...

  2. php中序列化与反序列化

    解析PHP多种序列化与反序列化的方法 序列化是将变量转换为可保存或传输的字符串的过程:反序列化就是在适当的时候把这个字符串再转化成原来的变量使用.这两个过程结合起来,可以轻松地存储和传输数据,使程序更 ...

  3. Nexus3.0.0+Maven的使用(三)

    这章主要讲怎么和Maven做集成,集成的方式主要分以下种情况:代理中央仓库.Snapshot包的管理.Release包的管理.第三方Jar上传到Nexus上 1  代理中央仓库 只要在PMO文件中配置 ...

  4. android 代码生成selector drawable

    public static StateListDrawable makeSelector(Context context, int idNormal, int idPressed, int idFoc ...

  5. nyoj 708 ones 动态规划

    http://acm.nyist.net/JudgeOnline/problem.php?pid=708 状态转移方程的思路:对于一个数N,可以是N - 1的状态+1 得到,另外,也可以是(n / 2 ...

  6. Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局

    1.textview 垂直水平居中的设置 Android:gravity="center_vertical|center" 2.LinearLayout中设置控件垂直布局,默认的是 ...

  7. ngrok 配置

    安装git 1.安装git,我安装的是2.6版本,防止会出现另一个错误,安装git所需要的依赖包 yum -y install zlib-devel openssl-devel perl hg cpi ...

  8. C#泛型代理、泛型接口、泛型类型、泛型方法

    //http://www.cnblogs.com/JeffreySun/archive/2012/11/14/2770211.html //http://www.baqima.com/a/2628.h ...

  9. 批量Clip

    没有建立对应dataset,直接生成featureclass,主要是工作中没几个dataset. # -*- coding: utf-8 -*-__author__ = 'tanshuai' impo ...

  10. android微信分享要注意的地方

    最近在做android端分享的功能,在微信开放平台查看了下官网上的开发文档,一步一步的按文档上的步骤来: 1.申请你的AppID 2.下载开发工具包 3.搭建开发环境,引入libammsdk.jar文 ...