流体容器上方的流体按钮上的文本省略号

Question

我有一个盒子，其大小由img定义。在此图像中有一个按钮，可以保存任意数量的文本。如果文本小于图像，则按钮将放置在中间，如果文本不是图像，则必须用文本省略号剪切。文本的最大大小必须是图像的宽度，因此即使它不适合它也不能越过框。有人只知道使用CSS的解决方案吗？以下是演示：http://jsfiddle.net/h3emzbcq/3/

<div class="border-box">
<div class="item-pic">
    <img src="http://demo7.firstvoicemedia.com/u5.png" alt="" class="img-responsive">
    <div class="item-btn">
        <button class="btn btn-green"><span class="btn-text">Text place Text place Text placeText place Text place Text place</span></button>
    </div>
</div>

                                   文字的地方              

感谢您的回答。

Answer 1

删除width并在max-width: 100%上设置<button>：

.btn {
    border: 0;
    padding: 0;
    margin: 0;
    /* added */
    max-width: 100%;
}

这是updated fiddle。