CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块):
.text-overflow {
display:block;/*内联对象需加 */
width:31em;/* 何问起 hovertree.com */
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义:
对于表格超出范围显示省略号
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
/*
何问起
hovertree.com
*/
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,
其它的浏览器文本超出指定宽度时会隐藏。
CSS控制文本超出指定宽度显示省略号和文本不换行的更多相关文章
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- CSS实现文本超过指定长度显示省略号
<style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...
- CSS控制TD内的文本超出指定宽度后不换行而用省略号代替
<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...
- flutter实现文字超出最大宽度显示省略号
Container( width: 60, child: Text( '...', maxLines: 1, overflow: TextOverflow.ellipsis, ), ) 给Text外层 ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
随机推荐
- RAID卡
简单的说,RAID是一种把多块独立的物理硬盘按不同方式组合起来形成一个逻辑硬盘,从而提供比单个硬盘有着更高的性能和提供数据冗余的技术. RAID卡一般分为硬RAID卡和软RAID卡两种 ...
- 一个winform带你玩转rabbitMQ
源码已放出 https://github.com/dubing/MaoyaRabbit 本章分3部分 一.安装部署初探 二.进阶 三.api相关 安装 部署 初探 先上图 一. 安装部署 下载 rab ...
- android 九宫加密记事本
自己写的超级安全记事本,用PBEWithMD5AndDES加密sqlite内容几乎无法破解, 九宫点密码登录, 支持备份到SDcard,email,network drivers etc. 附件Apk ...
- 查看iOS模拟器应用的沙箱文件
iOS 升级到8.3 以后就不能用iFunBox 这样的工具看沙箱里的文件了(非共享的), 而开发时我们的数据库文件又不在共享目录里.关于这个问题,我们可以看模拟器里的沙箱文件, iOS8.0 以后, ...
- 配置Tomcat的访问日志格式化输出
博客搬家,本文新地址:http://www.zicheng.net/article/9 本文描述如何配置tomcat的访问日志,按我们的要求输出指定的日志格式. 且在Nginx+Tomcat的配置 ...
- Show Linux Package Sort By Size
ArchLinux: ~ $ pacsysclean Debian: ~ $ sudo apt-get install debian-goodies ~ $ dpigs -H
- 使用IntelliJ IDEA 14和Maven创建java web项目
参考地址 http://www.cnblogs.com/jifeng/p/4658765.html
- Oracle数据库入门——物化视图语法
一.Oracle物化视图语法 create materialized view [view_name]refresh [fast|complete|force][on [commit|demand] ...
- Android Launcher 研究学习
Launcher是系统启动后第一个启动的程序,是其它应用程序的入口,也就是我们的手机程序的桌面程序; 一.Launcher的定义及构成: <1>通过查看官方提供的Launcher源码可以知 ...
- 阿里云ubuntu环境笔记
安装jdk8 1.下载JDK 从官网下载jdk8 jdk-8u5-linux-x64.tar.gz 2.解压 $ tar -zxvf jdk-8u5-linux-x64.tar.gz 解压出来是一个j ...