1.包含文字的元素必须是块级元素,不是块级元素使用display:block使其具有块级元素属性;

2.具备上述基本条件后,css样式如下:

{
display: block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

  如果包含在table的td元素内,td元素需要明确width的百分比,例如:width:20%;

CSS 文字超长省略显示并隐藏超长部分的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  3. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  4. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  5. css设置滚动条并显示或隐藏

    看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...

  6. css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来

    display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  9. CSS文字超出省略

    .ellipsis { white-space:nowrap overflow:hidden text-overflow:ellipsis }

随机推荐

  1. tail()和head()

    pandas 里的tail() 函数,读取后几行. head() dataframe.head():前五行 显示某一列的前五行,两种方法: 或者:

  2. 29.Combination Sum(和为sum的组合)

    Level:   Medium 题目描述: Given a set of candidate numbers (candidates) (without duplicates) and a targe ...

  3. [Android] Android MVP 架构下 最简单的 代码实现

    Android  MVP 架构下  最简单的 代码实现 首先看图: 上图是MVP,下图是MVC MVP和MVC的区别,在于以前的View层不仅要和model层交互,还要和controller层交互.而 ...

  4. linux上 查看mysql的binglog日志

    查看mysqlbinglog日志 mysqlbinlog --no-defaults --database=数据库名称 --start-datetime= > /mysql.txt 备注: -- ...

  5. “全栈2019”Java第五十八章:多态中方法返回类型可以是子类类型

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. 数据库管理工具navicat基本使用方法——以MySql为例

    mysq数据库管理工具navicat基本使用方法 https://www.cnblogs.com/neuedu/p/5876874.html

  7. LINUX主机通过域名访问网络失败

    故障现象: 用telnet IP+端口的方式测试正常,能够访问: 通过telnet域名+端口方式,提示:未知的名称或服务(Name or service not known). 测试百度的网络地址,p ...

  8. oracle 创建临时表空间/表空间,用户及授权

    1:创建临时表空间 create temporary tablespace user_temp tempfile 'Q:\oracle\product\10.2.0\oradata\Test\xyrj ...

  9. Levenshtein字符串距离算法介绍

    Levenshtein字符串距离算法介绍 文/开发部 Dimmacro KMP完全匹配算法和 Levenshtein相似度匹配算法是模糊查找匹配字符串中最经典的算法,配合近期技术栏目关于算法的探讨,上 ...

  10. JAVA JVM 杂谈(一)

    JVM能够跨计算机体系结构来执行Java字节码,主要是由于JVM屏蔽了与各个计算机平台先关的软件或者硬件之间的差异,使得与平台先关的耦合统一由JVM的提供者来实现. JVM结构组成: 1.类加载器:在 ...