Heim >Web-Frontend >HTML-Tutorial >css 超出部分显示省略号_html/css_WEB-ITnose
css 超出部分显示省略号_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:58:531245Durchsuche
代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
重点代码：text-overflow: ellipsis;
解释：简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> css 超出部分显示省略号</title></head><body> <div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div> 重点样式是 text-overflow: ellipsis; <br /> text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。</body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5兼容IE各版本的写法_html/css_WEB-ITnoseNächster Artikel：通用 CSS 笔记、建议与指导_html/css_WEB-ITnose