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显示／隐藏方法及２种方法比较原码 - 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. 解决Android SDK下载和更新失败的方法（Win系统） 和离线安装

    http://jingyan.baidu.com/article/a3a3f811f370558da2eb8a94.html http://jingyan.baidu.com/article/636f ...

  2. Logstash5.0.X离线安装插件报错，仍然提示无法联网

    本人最初将此解决方案发布在 ELK中文社区 http://elasticsearch.cn/question/1046 由于生产环境无法连接互联网,所有再一台联网机器上将所有插件做了 pack 拖到生 ...

  3. Spark SQL Example

     Spark SQL Example This example demonstrates how to use sqlContext.sql to create and load a table ...

  4. nodejs express环境配置

    下载安装最新版nodejs,安装完毕运行命令 node -v 查看版本以及是否安装成功. 然后安装express插件,命令 npm install -g express (全局)  , express ...

  5. java中static 和 final 的一些使用规则

    一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...

  6. pip China

    建个文件 ~/.pip/pip.conf, 内容如下 [global] index-url = http://b.pypi.python.org/simple [install] use-mirror ...

  7. I prefer fcitx

    sudo add-apt-repository ppa:fcitx-team/nightly sudo apt-get update Then, you should install Fcitx.Fc ...

  8. Lucene.net 高亮显示搜索词

    网站搜索关键词,往往搜索的结果中,要把用户搜索的词突出显示出来,这就是高亮搜索词的含义.而lucene也恰恰支持这样的操作.在此,我用的是盘古的组件,代码如下: PanGu.HighLight.Sim ...

  9. Java设计模式1——策略模式（Strategy Pattern）

    最近觅得一本好书<您的设计模式>,读完两章后就能断言,一定是一头极品屌丝写的,而且是专写给开发屌丝男的智慧枕边书,小女子就委屈一下,勉强看看,人笨,谁让他写得这么通俗易懂呢!为了加深理解, ...

  10. echarts学习网站

    echarts : http://echarts.baidu.com/echarts2/doc/example.html 相关脚本学习网站:http://www.jb51.net/html/list/ ...