博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 文本和表格中文字溢出显示省略号
阅读量:7091 次
发布时间:2019-06-28

本文共 708 字,大约阅读时间需要 2 分钟。

CSS控制文本超出指定宽度后用省略号代替,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会有“...”,

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

转载于:https://www.cnblogs.com/lbnnbs/p/5924208.html

你可能感兴趣的文章
Nginx 负载均衡(简单配置)
查看>>
Linux之使用haproxy搭建web群集(2)
查看>>
在Linux启动时自动加载内核模块
查看>>
tomcat部署web程序,jkd环境变量设置,
查看>>
GitLab安装篇-Ubuntu 14.04 LTS
查看>>
我的友情链接
查看>>
沟通的艺术之幻灯片这奇女子
查看>>
一张图介绍CCIE
查看>>
VM增加centos6.5磁盘容量
查看>>
Servlet容器启动过程
查看>>
CentOS安装配置nagios(1)
查看>>
RedHat 6.4 搭建rhcs集群
查看>>
三生万物:决策树
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
Python爬虫框架Scrapy学习笔记原创
查看>>
大数据时代怎么做
查看>>
java基本语法
查看>>
细说HTTP之上篇
查看>>
将Eclipse Maven项目 导入 IDEA 步骤 成功运行 已测试!~LC
查看>>