可以设置其text-overflow属性，text-overflow有两个值，分别是clip和ellipsis；
clip ：默认值 ，不显示省略标记(...)，而是简单的裁切；
ellipsis： 当对象内文本溢出时显示省略标记(...)。
如：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100pxbackground-color:#87CEEBpadding:2px 3px
overflow:hiddentext-overflow:ellipsiswhite-space:nowrap}
</style>
</head>
<body>
<div id="box">测试测试测试测试测试测试测试</div>
</body>
</html>
需要注意的是：
一定要给容器定义宽度；
overflow: hiddentext-overflow:ellipsiswhite-space:nowrap一定要一起用
很显然，你的行高不对，字的行高是12px如果你下边文字的高度超高了12px,那多出的文字必然会换行，解决办法有两个，第一是用line-height:12px；我看你用了14像素，那多出的2像素必然会显示出来，第二种就是强制在一行显示的办法， white-space:nowrap把这个加在文字的样式下，问题就解决了欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）