Fix css на атрибут тега "title"

Question

Я использую jquery.fancybox, чтобы открыть образ модального. Я заметил, что описание можно сделать, если я использую атрибут title.

Когда я использую длинное описание, весь текст отображается только в одной строке. Что делает часть текста исчезающей.

Как стилизовать заголовок, чтобы выглядеть как абзац?

Я попытался изменить дисплей: встроенный блок на дисплей: блок и применить несколько вариантов ширины, но это не сработало.

HTML

<div id="carousel" class="es-carousel-wrapper" ng-controller="myCtrl"> 
     <div class="es-carousel"> 
     <ul> 
     <li>      
      <figure class="img-rounded"> 
      <a class="view magnifier" data-fancybox-group="gallery" href="images/publishing/labirintite.jpg" title="{{text}}"> 
      <img src="images/publishing/labirintite300x189.jpg" alt="Labirintite" /> 
      <span></span> 
      </a> 
      </figure> 
      </li> 
     </ul> 
     </div> 
</div> 

CSS

.fancybox-title { 
visibility: hidden; 
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 
position: relative; 
text-shadow: none; 
z-index: 8050; 
} 

.fancybox-opened .fancybox-title { 
visibility: visible; 
} 

.fancybox-title-float-wrap { 
position: absolute; 
bottom: 0; 
right: 50%; 
margin-bottom: -35px; 
z-index: 8050; 
text-align: center; 
} 

.fancybox-title-float-wrap .child { 
display: inline-block; 
margin-right: -100%; 
padding: 2px 20px; 
background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 
background: rgba(0, 0, 0, 0.8); 
-webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
     border-radius: 15px; 
text-shadow: 0 1px 2px #222; 
color: #FFF; 
font-weight: bold; 
line-height: 24px; 
white-space: nowrap; 
} 

.fancybox-title-outside-wrap { 
position: relative; 
margin-top: 10px; 
color: #fff; 
} 

.fancybox-title-inside-wrap { 
padding-top: 10px; 
} 

.fancybox-title-over-wrap { 
position: absolute; 
bottom: 0; 
left: 0; 
color: #fff; 
padding: 10px; 
background: #000; 
background: rgba(0, 0, 0, .8); 
} 

Answer 1

вы используете white-space: nowrap; и что делает текст пребывание в одной линии, не нарушая