<分区>
我正在使用 jquery.fancybox 打开图像模式。我注意到如果我使用 title 属性就可以完成描述。
当我使用长描述时，所有文本只显示在一行中。是什么让部分文本消失了。
如何设置标题的样式使其看起来像一个段落？
我尝试将 display: inline-block 更改为 display: block 并应用一些宽度替代方案，但没有成功。
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);
}