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;">
        <tr>
            <td class=‘lineOverflow‘>鉴于大部分中国球迷只能深夜在家看直播,最多和基友在一起,这个忠告就不必转给中国球迷了</td>
        </tr>
    </table>

在火狐、chrome、IE8均有效,table必须设置table-layout:fixed,另,在火狐下必须给table设定宽度,不然是无效的

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

时间: 2024-10-11 14:38:43

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

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

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

CSS- 文本超出指定宽度后隐藏并显示为省略号

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overflow:hidden;一起使用.*/ } 对于表格

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

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

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

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

css 文本超出容器长度后自动省略的方法!

我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代码改了个带省略号并且获取光标显示全部的功能,废话不多说先上效果图! 如果文本超出了指定宽度就会用...省略,并且当鼠标获取光标的时候会显示全部! 上代码 <span style=' width:290px; white-space: nowrap;text-overflow: ellipsis;ov

CSS文本超出指定行数后省略号显示

word-break:break-word; //换行模式overflow: hidden;text-overflow: ellipsis; //修剪文字display: -webkit-box;-webkit-line-clamp:2; //此处为上限行数-webkit-box-orient: vertical; http://www.w3school.com.cn/cssref/pr_text-overflow.asphttp://www.w3school.com.cn/cssref/pr_

控制表格内的文本溢出时隐藏

table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ text-align:center; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overflow:hid

css控制图片上下居中,超出部分隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ width: 100%; display: block; } div{ width: 600px; height: 600px; border: 1px solid red; text-al

设置文本超出既定宽度隐藏,并显示省略号

这是一段文字,用来测试超出隐藏 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取... txtHide class应该这样写: .txtHide{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字折行. 3.text-overflow表示当文本溢出时是否显示省略标记,有两