"a"タグの "title"属性にCSSを修正しました

Question

jquery.fancyboxを使用して画像モーダルを開きます。 title属性を使用すると説明ができることに気付きました。

長い説明を使用すると、すべてのテキストが1行に表示されます。何がテキストの一部を消してしまうのか。

タイトルを段落のように表示するにはどうすればよいですか？

私はディスプレイを変更しようとしました：インラインブロックに表示：をブロックし、いくつかの幅の選択肢を適用するが、それは動作しませんでした。

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); 
} 

Answer 1

あなたはwhite-space: nowrap;を使用していて、それが参考になる