CSS控制文本超出指定宽度显示省略号和文本不换行

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

.text-overflow {
    display:block;/*内联对象需加 */
    width:31em;/* 何问起 hovertree.com */
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:

对于表格超出范围显示省略号

 1 table{
 2     width:30em;
 3     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 4 }
 5 /*
 6 何问起
 7 hovertree.com
 8 */
 9 td{
10     width:100%;
11     word-break:keep-all;/* 不换行 */
12     white-space:nowrap;/* 不换行 */
13     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
14     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
15 }

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,

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

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

时间: 2024-10-24 10:10:53

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

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

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;

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

<style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } </style> <table style="table-layout:fixed; width: 200px;"> <t

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

1 <style type="text/css"> 2 li { 3 width:200px;/*宽度,超过即会溢出*/ 4 line-height:25px;/*设置行间距*/ 5 text-overflow:ellipsis;/*当文本溢出时显示…此时还必须定义: 6 强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏 (overflow:hidden)*/ 7 white-space:nowrap;/*表示文本不会换行*/ 8 overflo

html + CSS实现文字超出长度隐藏,显示省略号

表格: table{ table-layout: fixed; } } t td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } 本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式: 1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一

css实现文本超出li宽度的部分隐藏

css实现文本超出li宽度的部分隐藏:在某些实际应用中,希望把文本超出的部分隐藏而非换行,下面就是一段这样的代码实例,大家可以参考一下.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

CSS控制图片缩放或者部分显示

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS控制图片缩放或者部分显示</title> 6 </head> 7 8 <body> 9 <!--图片自动缩放显示:通过设置图片宽来实现--> 10 11 12 <!--第一种:设置图片的宽为屏幕宽度的百分比,实现图片跟随屏幕大小自

文字超出隐藏并显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法 一是用程序开截取字符长度,这个其实也是可以的 第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧, css样式如下: .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /

CSS控制段落首字母放大显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>石家庄伸缩门</title><

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

该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢. 接下来重点说一说多行文本溢出显示