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属性来,当然还需要加宽 ...
随机推荐
- 原创教程:SpagoBI4.2汉化及配置Mysql数据库教程
SpagoBI4.2汉化及配置Mysql数据库教程 商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的B ...
- VirtualBox的四种网络连接方式
VirtualBox中有4中网络连接方式:a. NAT 网络地址转换模式(Network Address Translation)b. Bridged ...
- AngularJS初始化闪烁
可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html
- Kafka - SQL 代码实现
1.概述 上次给大家分享了关于 Kafka SQL 的实现思路,这次给大家分享如何实现 Kafka SQL.要实现 Kafka SQL,在上一篇<Kafka - SQL 引擎分享>中分享了 ...
- 编译 curl with ssl
安装 openssh后,使用 curl 的 ./configure --with-ssl 时,报错“找不到 ssl”.因为 curl在 /usr/local/ssl的安装目录下找动态连接库.而ssl默 ...
- 将j-ui(dwz)套用到thinkphp注意事项
目前我用的 thinkphp 版本是 3.1.3 J-UI dwz 版本好像是 1.4 现在 j-ui有 thinkphp的例子了,请尽量以他们原创为主,我这里都是一些自己搜集和自己钻研的土办法, ...
- Windows Azure Compute Emulator无法启动问题解决方案
Visual Studio 2013安装了Windows Azure SDK 2.7,但启动Emulator调试时,出现如下错误: Error: The installed Windows Azure ...
- java中String byte HexString的转换
原文:http://blog.sina.com.cn/s/blog_62e9ec530101ebv6.html HexString——>byte public static byte[] hex ...
- 将PDM文件导出成CHM帮助文件
实际开发中常常将维护数据库字段用 powerdesigner 维护起来,而实际要查阅 数据库用了什么字段是,常常又不方便去打开PDM 文件去找. 下面分享一个小工具,效果看下图: 有这个小工具, PD ...
- TypeScript札记:初体验
1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...