现有问题
文本超出做...处理，之后却和其他的文本无法对齐了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
display:inline-block;
width:150px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<body>
123<div>今天是七夕节呀啦啦啦哈哈哈</div>
</body>
</html>
http://js.jirengu.com/lozufaduyu/1/edit?html,css,output
问题分析
去掉overflow:hidden属性之后发现就可以对齐，查了资料发现，inline-block加上overflow:hidden,就会默认vertical-align:baseline，基线对齐
解决方案
只需设置vertical-align:top或者bottom可解决
div{
display:inline-block;
width:150px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
vertical-align:top
}
网友评论