css文字省略遇上inline-block失效的问题

<div class="title">
    <p>小妇人乔和劳里为什么不能在一起</p>
</div>

.title{padding:10px;}
.title p{background-color:#d9edf7;border-radius:15px;line-height:20px;padding:5px 10px 5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.title p{display:inline-block;max-width:100%;}

效果：

关键代码：max-100%