在“a”标签“title”属性上修复css

时间:2016-11-28 19:41:31

标签: javascript jquery html css angularjs

我正在使用jquery.fancybox打开图像模式。我注意到如果我使用title属性可以进行描述。

当我使用长描述时,所有文本只显示一行。是什么让文本的某些部分消失了。

如何将标题设置为看起来像段落?

我尝试将显示更改:内嵌块更改为显示:阻止并应用一些宽度替代,但它不起作用。

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

1 个答案:

答案 0 :(得分:5)

您正在使用var dateFormat: DateFormatStatic; ... odatadateformatter(datetime: sap.ui.model.odata.type.Date, format?: string): string { if(!format) format = "yy-mm-dd:hh:MM:ss"; return dateFormat(new Date(datetime), format); } ,这会使文字保持在一行而不会破坏