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

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 .