首页 > 代码库 > CSS中的text-overflow:clip|ellipsis的使用
CSS中的text-overflow:clip|ellipsis的使用
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...,可以使用text-overflow:clip|ellipsis
基本语法：text-overflow : clip | ellipsis
若为text-overflow:clip 取默认值，不显示省略标记(...)，而是简单的裁切
若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...)
例如：
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> #box{ width:100px; background-color:#87CEEB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } </style> </head> <body> <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div> </body></html>注：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.
CSS中的text-overflow:clip|ellipsis的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。