Div内部的内容超出部分显示省略号(仅仅只有一行内容)
效果如下:
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内部的内容超出部分显示省略号(仅仅只有一行内容)的更多相关文章
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器
1,公共样式,在公共的 CSS 文件中加入以下内容 /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
随机推荐
- soj4271 Love Me, Love My Permutation (DFS)
4271: Love Me, Love My Permutation Description Given a permutation of n: a[0], a[1] ... a[n-1], ( it ...
- appid 评价
//apple api #define kAppAppleId @"980883989" #define kAppRateUrl @"it ...
- phpcms学习的一点心得
最近,在学习phpcms的二次开发,因为要调试搜索模块程序,需建立若干栏目,按照栏目搜索.这一过程中涉及到phpcms的一个概念:模型. 以前并不太注意这个东东. 经过摸索,发现模型其实也是一个栏目的 ...
- HNU 12888 Encryption(map容器)
题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12890&courseid=274 解题报告:输入一个有 ...
- Caffe学习系列(9):solver优化方法
介绍了各种优化算法 参考:http://www.cnblogs.com/denny402/p/5074212.html
- nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器[转]
转 :http://redstarofsleep.iteye.com/blog/2123752 Nginx本身是一个非常出色的HTTP服务器,FFMPEG是非常好的音视频解决方案.这两个东西通过一个n ...
- BZOJ 2822: [AHOI2012]树屋阶梯
Description 求拼成阶梯状的方案数. Sol 高精度+Catalan数. 我们可以把最后一行无线延伸,所有就很容易看出Catalan数了. \(f_n=f_0f_{n-1}+f_1f_{n- ...
- python 类修饰器
1. 修改类函数. 场景: 如果要给一个类的所有方法加上计时,并打印出来.demo如下: # -*- coding:utf-8 -*- import time def time_it(fn): &qu ...
- centos 随意截屏
yum install kdegraphics 菜单路径: applications(应用程序)/Graphics(图形图像)/KSnapshot
- phpcms不能后台编辑模板
刚安装的phpcms后台无法编辑模板,实际上只需要改一个系统文件的值即可 打开phpcms项目根目录下的: caches/configs/system.php 找到第20行,代码如下: 'tpl_ed ...