效果如下:

css代码:

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

解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它 的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏 (overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

Div内部的内容超出部分显示省略号(仅仅只有一行内容)的更多相关文章

  1. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  2. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  3. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  4. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  5. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  6. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  8. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  9. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

随机推荐

  1. 清北暑假模拟day1 艳阳天

    /* 注意P有可能不是质数,不要用欧拉函数那一套,正解可以倍增,就是等比数列和的性质,注意n是否为奇数 */ #include <cstdio> #include <algorith ...

  2. HDOJ 3593 The most powerful force

    树形DP / 泛化物品的背包...可以去看09年徐持衡论文<浅谈几类背包问题> The most powerful force Time Limit: 16000/8000 MS (Jav ...

  3. OC第三节——NSArray和NSMutableArray

    1.OC数组和c数组的区别        C语言的数组:            相同类型变量的有序结合. 类型:可以是简答数据类型.构造数据类型                int     a[10 ...

  4. PHP get_class_methods函数用法

    get_class_methods — 返回由类的方法名组成的数组 说明 array get_class_methods ( mixed $class_name ) 返回由 class_name 指定 ...

  5. 【C语言入门教程】4.8 指针数组

    指针数组是一种特殊的数组,这类数组存放的全部是同一数据类型的内存地址.指针数组的定义形式为: 数据类型 *数组名[长度]; 例如: const char *c[4] = { "China&q ...

  6. Mac Pro 修改环境变量

    参考:Ubuntu 12 修改环境变量 [实战] 把 php.php-fpm.nginx.mysql 的相关命令路径添加到 用户环境变量 $ vim ~/.bash_profile alias ll= ...

  7. Ubuntu 12 安装 搜狗输入法

    下载地址:http://pinyin.sogou.com/linux/?r=pinyin Ubuntu 12 中,安装搜狗输入法注意事项 http://pinyin.sogou.com/linux/h ...

  8. 《Lua程序设计 第二版》学习笔记一

    Lua简介 Lua是一种简单.可拓展.可移植及高效的脚本语言. 开始 Lua之间不需要分隔符 运行方式: Linux下: lua -i prog dofile("lib1.lua" ...

  9. HDU 5592

    原题: http://acm.hdu.edu.cn/showproblem.php?pid=5592 线段树的变形,先说思路. 题目中给出了当前节点之前的逆序对数,则p[i]-p[i-1]就是对于p[ ...

  10. X.Org可能将失去它的域名x.org

    X.Org基金会面临失去它的一个重要资产:单字母域名x.org.过去半年里,围绕着x.org域名的所有权问题,X.Org基金会董事会尝试私下解 决,但未能如愿.域名将于1月19日过期,只剩下不到两周的 ...