简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

CSS3文本溢出显示省略号_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:25:34
Original
1864 people have browsed it

CCS3属性之text-overflow:ellipsis;的用法和注意之处

语法：

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
ellipsis： 当对象内文本溢出时显示省略标记（...）。

更多参考：http://hovertree.com/h/bjaf/pr_text-overflow.htm

在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width:200px;这三个样式共同使用才会有效果，示例代码：

欢迎光临何问起! hovertree.com css3实现文本溢出显示省略号。Midi下载
Copy after login

查看效果：http://hovertree.com/h/bjaf/1hg11eg4.htm

练习题：http://hovertree.com/tiku/bjaf/curs4a42.htm

web前端汇总:

Related labels：
CSS3文本溢出显示省略号
source：php.cn
Previous article：CSS 编码规范_html/css_WEB-ITnose Next article：embed标签的src为action返回二制流时chrome不显示_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
android - 对于一个单行TextView，当字符串超出一行时，如何获取未显示的部分字符串？ 想要获取textview某行实际显示的字数，而不是整行的字数，这该怎么弄呢？求大神 问题修正：textview设定最大行数为1后，文本超出了textview，textView末尾显...
From 2017-04-17 14:34:53
0
1
241
css - 超出div宽度范围的文字进行省略号省略，如何在鼠标移上去以后显示完整的内容？ 使用了 {代码...} 如何在鼠标移上时，或者使用其他方式来显示完整信息？
From 2017-04-17 12:59:05
0
7
812
css - chrome更新最新版本后文字溢出省略号显示——失效了 就是这段代码，white-space:nowrap;text-overflow:ellipsis;overflow:hidden;，PC的chrome版本57，nexus的chro...
From 2017-04-17 11:58:42
0
0
465
前端 - 如何实现指定多少行后内容未显示完就用省略号...代替？ 1）已知文字父级元素div的高度，比如500px； 2）已知字体大小：font-size:28px; 如何算出需要显示多少行？ 知道多少行后，如何实现指定这些行后内容未显示完就用省...
From 2017-04-17 11:32:50
0
8
379
css3 - 列表横向溢出就显示 省略号（省略号是个图片） 移动端，图片列表横向溢出就显示 省略号（图片），有的屏幕小3个就显示省略号，有的屏幕大，4个才显示省略号。这功能怎么实现？
From 2017-04-17 11:22:22
0
1
1063
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！