修复“a”标签“title”属性的css

我正在使用jquery.fancybox打开图像模式。我注意到，如果我使用title属性，则可以完成描述。修复“a”标签“title”属性的css

当我使用长描述时，所有文本都只显示在一行中。什么使文本的某些部分消失。

我如何将标题看起来像段落？

我试图改变显示：inline-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); 
}

来源

2016-11-28 ma.gr

一个活生生的例子将是有益的。尝试在答案中添加一个codepen/jsfiddle或代码片段 –

您使用white-space: nowrap;这使得文本留一行没有打破

来源

2016-11-28 19:44:43 Chiller

谢谢。有效！ –

欢迎您:) – Chiller

修复“a”标签“title”属性的css

回答

相关问题