Fix css auf "a" Tag "Titel" Attribut

Question

Ich benutze jquery.fancybox, um ein Bild modal zu öffnen. Ich habe bemerkt, dass eine Beschreibung gemacht werden kann, wenn ich title-Attribut verwende.

Wenn ich eine lange Beschreibung verwende, wird der gesamte Text in nur einer Zeile angezeigt. Was einen Teil des Textes verschwinden lässt.

Wie kann ich Titel wie einen Absatz aussehen?

Ich habe versucht, Anzeige zu ändern: inline-block zu display: block und einige Breite Alternativen gelten, aber es hat nicht funktioniert. wäre hilfreich

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

Sie verwenden white-space: nowrap; und das macht den Text Aufenthalt in einer Zeile ohne