Как перенести текст внутри button?

Question

[NDL]

Ребят привет.

Есть адаптивное изображение. Внутри изображения есть кнопка, если внутри этой кнопки слишком много текста, он вылазит за изображение. Как сделать текст адаптивный внутри кнопки, что бы он подстраивался под ширину картинку и если надо переносился?

Код ниже. Спасибо!

<div class="col-md-4 col-xs-6 work EVENT">
   <div class="img-film" style="background-image: url(../img/00.jpg);">
      <div class="write-up">
         <button href="#igra" data-toggle="modal" class="btn-fil btn-film hidden-xs">
          Текст Текст Текст Текст Текст Текст Текст Текст
         </button> 
         <p class="EVENT"> &#8226; <span>EVENT</span> </p>
      </div>
   </div>
</div>

Answer 1

[Balek]

.btn-film { white-space: normal; }

Answer 2

[Stalker_RED]

У вас размеры .img-film заданы вообще?
Вот поставил 200px - и текст внутри кнопки переносится сам.
https://jsfiddle.net/nfmsL2ye/