I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute.
However, when the description is too long, the text is displayed on a single line and some of it disappears. How can I style the title to look like a paragraph?
I have tried changing the display property from inline-block to block and experimenting with different width options, but it did not produce the desired result.
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 don'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);
}