如何创建缩短文本？

Question

我有HTML像:

<div class="box">
   <a href="#">Stackoverflow is very useful site and I love it</a>
</div>

和CSS一样:

.box {
    width:230px;
    height:50px;
    line-height:50px;
    background:#eee;
}

.box a {
    color:#000;
}

我想创建缩短链接的文本.如果它本身溢出了box课程,那就把它带到"......".我怎么能用css或jquery做到这一点？

在这里检查jsfiddle

Answer 1

将以下样式添加到.box:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;