текст-эллипсис на жидкостной кнопке над контейнером для жидкости

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.