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

.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. 给Number类型增加加法、减、乘、除函数,解决float相加结果精度错乱的问题

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. spring mvc jsp运行不起来的问题

    spring mvc已经处理成让jsp运行,即: <bean class="org.springframework.web.servlet.view.InternalResourceV ...

  3. 在 Excel 中使用正则表达式进行查找与替换

    在 Excel 中,使用 Alt+F11 快捷键打开 VBA 项目窗口,在左侧的工作表名称上点右键,选择查看代码,即可出出现右侧的代码编辑窗口 在代码窗口中输入以下代码: Private Sub Re ...

  4. 15.6.8-sql小技巧

    取月头月尾: declare @someDay datetime,@firstDay datetime,@endDay datetime set @someDay='2015.2.2' ,) ,) s ...

  5. 99 Lisp Problems 二叉树(P54~P69)

    P54A (*) Check whether a given term represents a binary tree Write a predicate istree which returns ...

  6. Spring3系列6 - Spring 表达式语言(Spring EL)

    Spring3系列6-Spring 表达式语言(Spring EL) 本篇讲述了Spring Expression Language —— 即Spring3中功能丰富强大的表达式语言,简称SpEL.S ...

  7. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  8. uniGUI试用笔记(十四)TUniTreeView的CheckBox

    TUniTreeView目前版本没有封装CheckBox功能,所以需要手工处理,幸好0.99版提供部分代码了,修改过程如下: 1.uniGUIAbstractClasses.pas单元中修改基类TUn ...

  9. 使用 crosswalk-cordova 打包sencha touch 项目,再也不用担心安卓兼容问题!

    国内的安卓手机品牌众多,安卓操作系统碎片化也很严重,我们使用sencha touch 开发的应用不可避免的出现了各种无解的兼容性问题. 有时候我就在想,有没有既能支持cordova,又能让我们把Chr ...

  10. 重构第3天:方法提公(Pull Up Method)

    理解:方法提公,或者说把方法提到基类中. 详解:如果大于一个继承类都要用到同一个方法,那么我们就可以把这个方法提出来放到基类中.这样不仅减少代码量,而且提高了代码的重用性. 看重构前的代码: usin ...