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 ...
随机推荐
- 2014牡丹江K Known Notation
Known Notation Time Limit: 2 Seconds Memory Limit: 65536 KB Do you know reverse Polish notation ...
- oracle数据库表空间扩容方法
1. 先查询表空间在物理磁盘上存放的位置,注意使用sysdba的账号登陆. SELECT tablespace_name, file_id, file_name, ), ) total_space F ...
- DiscuzX 论坛首页 和 分 区设置版块横排
在论坛看到很多新手站长在咨询怎么样才可以设置和Discuz! 官方论坛首页一个分区下面横排3个板块或者更多呢?如下图: 下面我一起来操作下: 论坛 后台 论坛 板块管理 分区 编辑 图一: 图二: 说 ...
- .NET Core Preview
.NET Core Preview 这是很容易上手使用.NET Core在您选择的平台上. 你只需要一个命令行,一个文本编辑器和10分钟的时间. 原文链接:https://www.microsoft. ...
- HDU 2795
题目: http://acm.hdu.edu.cn/showproblem.php?pid=2795 线段树问题,线段树的每个叶子节点保存的是当前行还剩余的长度,每次查询找到满足条件的一行减去该条幅的 ...
- 又一个绝对棒的对话框插件fancybox v1.3.4
http://www.jsfoot.com/jquery/demo/2011-07-30/fancybox/index.html jquery插件:fancybox Fancybox的特点如下: ...
- iOS开发——项目需求-快速回到当前界面的顶部
利用UIWindow实现快速到达顶部 如下图,在状态栏添加一个没有颜色的UIWindow(里面添加一个按钮),实现点击这个按钮时能快速的回到当前界面的顶部 核心代码 一.利用UIWindow实现到达顶 ...
- BZOJ2002——[Hnoi2010]Bounce 弹飞绵羊
1.题目大意:就是给一个动态的森林求size域 2.分析: 这个就是一个动态树问题,对于每一个位置i有i+ki这个父亲, 于是这就是一个森林了,然后对于每一个修改直接lct维护就好,询问就是i到最外面 ...
- 安装sqlserver2012时出现的丧心病狂的错误
Service Pack 安装程序 ------------------------------ 出现以下错误: 安装程序集“Microsoft.VC80.ATL,version="8.0. ...
- IE6支持max-height及min-height解决方法
我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定高度范围值,有时也需要设置一个最小高度值,以达到对齐等样式.接下来为大家总结的如何解决IE6不支持max-height和不支持min ...