I am using jquery.fancybox to open an image modal. I noticed that a description can be done if I use title attribute.
When I use a long description all the text is displayed in only one line. What makes some part of the text desappear.
How can I style title to look like a paragraph?
I tried to change display: inline-block to display: block and apply some width alternatives but it did not work.
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);
}
