一般的文字截断(适用于内联与块):

.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会有“...”,

其它的浏览器文本超出指定宽度时会隐藏。

特效:http://www.cnblogs.com/roucheng/p/texiao.html

CSS控制文本超出指定宽度显示省略号和文本不换行的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

  4. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  5. flutter实现文字超出最大宽度显示省略号

    Container( width: 60, child: Text( '...', maxLines: 1, overflow: TextOverflow.ellipsis, ), ) 给Text外层 ...

  6. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  8. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  9. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

随机推荐

  1. Three Sources of a Solid Object-Oriented Design

    pingback :http://java.sys-con.com/node/84633?page=0,1 Object-oriented design is like an alloy consis ...

  2. centos7 Linux 尝试使用crontab

    一.安装crontab [root@CentOS ~]# yum install vixie-cron[root@CentOS ~]# yum install crontabs 说明:vixie-cr ...

  3. 【css】ie6 和 ie7 下 position 与 overflow 的问题

    前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...

  4. 我的常用mixin 之 lines

    /** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...

  5. Cheat (tldr, bropages) - Unix命令用法备忘单

    cheat 是一个Unix命令行小工具,用来查询一些常用命令的惯用法(我们都知道,man page阅读起来太累了,常常是跳到最后去看 examples,但并不是所有man pages里面都有examp ...

  6. 程序猿每个VPN真卡手

    昨天起使用了好久好久觉得是世上最好用的poVPN貌似跑路了 刚刚续费了一年也就这样没有了,可是更多的是心疼没有好用的vpn服务. 不过查到了一个红杏chrome插件,不是vpn 如果单单上网页足够了 ...

  7. Xcode报错:“Your build settings specify a provisioning profile with the UUID..... however, no such provisioning profile was found”

    运行环境: Xcode5 & 5.0及以上版本 对工程进行Archive打包的时候出现如下错误   问题描述: Code Sign error: No matching provisionin ...

  8. 给MySQL官方提交的bug report备忘

    1.  Bug #72215 When LOCK_plugin conflicts very much, one uninstall-audit-plugin operation crash  htt ...

  9. MARIADB 在 OPENSUSE 的安装。

    1.MARIADB  在 OPENSUSE  的安装或者升级  (参考 Setting up MariaDB Repositories ) OPENSUSE 从 12.3 版本开始,默认带有 MARI ...

  10. TN035: Using Multiple Resource Files and Header Files with Visual C++

    TN035: Using Multiple Resource Files and Header Files with Visual C++ This note describes how the Vi ...