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 ...
随机推荐
- CLGeocoder "Lost connection to geod" #error# when use geocodeAddressString:completionHandler
I got this warning when I tried to get destination using CLGeoCoder and the warning is coming out ...
- 浅谈checkpoint与内存缓存
事务日志存在检查点checkpoint,把内存中脏数据库写入磁盘,以减少故障恢复的时间,在此之前有必要提下SQL Server内存到底存放了哪些数据? SQL Server内存使用 对SQL Serv ...
- PHP读取word文档
在PHP中读取和写入WORD文档的代码 <? php // 建立一个指向新COM组件的索引 $word = new COM(”word.application”) or die(”Can't s ...
- Ubuntu 14 安装 Chrome/Chromium flash播放器
在命令终端中执行如下命令即可: sudo apt-get install pepperflashplugin-nonfree sudo update-pepperflashplugin-nonfree ...
- JVM内存监控工具 JavaMelody
这是一个需要web部署的工具,需要在容器中部署,然后将要监控的程序添加到该程序中即可. JavaMelody是java应用的监控工具,安装部署步骤如下: 1. 首先先下载javamelody.jar ...
- iOS开发——网络篇——数据安全(MD5),HTTPS,检测网络状态
一.数据安全 1.提交用户的隐私数据一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中服务器的访问日志是黑客攻击的重点对象之一 ...
- unity3d教程游戏包含的一切文件导入资源
http://www.58player.com/blog-2327-954.html 导入资源 将文件增加至工程文件夹的资源 (Assets) 文件夹后,Unity 将自动检测文件.将任何资源 (As ...
- Interleaving String leetcode
Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...
- [原创]使用java批量修改文件编码(ANSI-->UTF-8)
从网上下载的项目,有时候.java文件的编码是ANSI.导入到自己的MyEclipse后,查看项目源码的时候,总是乱码. 一个个.java去修改的话, 既麻烦又不现实.所以写了下面这个工具类,进行批量 ...
- COGS 2437 暗之链锁 II 题解
[题意] 给出一个有n个点的无向图,其中有n-1条主要边且这些主要边构成一棵树,此外还有m条其他边,求斩断原图的一条主要边和k条其他边使得图不连通的方案数mod109+7的值. 注意,就算你切断一条主 ...