修復「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

回答

相關問題