请选择 进入手机版 | 继续访问电脑版

程序人生

 找回密码
 注册

QQ登录

只需一步,快速开始

程序人生 门户 前端程序员 Css 查看内容

CSS不换行,超出宽度后用省略号代替

2016-11-24 17:49| 发布者: sean| 查看: 309| 评论: 0

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

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

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”
其它的浏览器文本超出指定宽度时会隐藏。

CSS不换行,超出宽度后用省略号代替同学们都学会了吗

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

相关分类


关于程序人生网|小黑屋|手机版|Archiver|

程序人生 | QQ

粤公网安备 44040202000007号

( 粤ICP备13038131号-5 )

返回顶部