CSS省略号在Bootstrap 3缩略图标题中不起作用

德维雷拉

我不知道如何使Bootstrap 3缩略图标题中的css:省略号工作。它在正文中可以正常工作,但是到目前为止,标题没有运气。我正在使用最新版本的Chrome。

jsfiddle链接

html

<div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
  <div class="thumbnail">
    <img src="http://animalia-life.com/data_images/bird/bird1.jpg" alt="image">
    <div class="caption">
      <div class="thumbnailheader"><h3>This text is too long to fit inside its container.</h3></div>
      <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.</p>
      <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
    </div>
  </div>
</div>

的CSS

.thumbnailheader, 
.thumbnail p
{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

有任何想法吗?

灰白

您需要直接在自身的元素上定义CSS(在本例中为<h3>)。如果您在父元素上设置此元素,则父元素的overflow:hidden不会“触发”<h3>

.thumbnailheader h3, .thumbnail p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

这是更新的小提琴:http : //jsfiddle.net/mA6Za/124/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS省略号在Bootstrap 3缩略图标头中不起作用

来自分类Dev

css。文本溢出不起作用:省略号

来自分类Dev

Twitter Bootstrap 缩略图类不起作用

来自分类Dev

Twitter-Bootstrap:在缩略图标题中带有下划线的文本

来自分类Dev

省略号不起作用

来自分类Dev

当宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

CSS文字溢出:省略号在V-chip上不起作用

来自分类Dev

宽度设置为百分比时,CSS省略号不起作用

来自分类Dev

如何防止CSS Grid井喷,使文本溢出省略号起作用

来自分类Dev

Bootstrap面板标题:标题文本右侧带有省略号和按钮

来自分类Dev

PagedList.Mvc省略号按钮不起作用

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

反应-添加省略号字符不起作用

来自分类Dev

CSS文本溢出:在Angular 8中使用CSS网格时省略号不起作用

来自分类Dev

具有3个点的CSS“省略号”的Angular 7垫选择问题

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

带有省略号的动态文本旁边的滑动图标

来自分类Dev

用字体真棒图标替换摘录省略号

来自分类Dev

截断标题旁边带有省略号的文本

来自分类Dev

在省略号上悬停时显示跨度标题

来自分类Dev

UIButton 标题太长的省略号未显示

来自分类Dev

bootstrap3缩略图网格

来自分类Dev

bootstrap3缩略图网格

来自分类Dev

Bootstrap 3缩略图滑块

来自分类Dev

文字溢出:省略号在有限的显示行中不起作用

来自分类Dev

文本溢出:省略号在嵌套的flex容器中不起作用

来自分类Dev

为什么text-overflow:省略号在这里不起作用:

来自分类Dev

文本溢出:省略号在此元素上不起作用

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

Related 相关文章

  1. 1

    CSS省略号在Bootstrap 3缩略图标头中不起作用

  2. 2

    css。文本溢出不起作用:省略号

  3. 3

    Twitter Bootstrap 缩略图类不起作用

  4. 4

    Twitter-Bootstrap:在缩略图标题中带有下划线的文本

  5. 5

    省略号不起作用

  6. 6

    当宽度设置为百分比时,CSS省略号不起作用

  7. 7

    CSS文字溢出:省略号在V-chip上不起作用

  8. 8

    宽度设置为百分比时,CSS省略号不起作用

  9. 9

    如何防止CSS Grid井喷,使文本溢出省略号起作用

  10. 10

    Bootstrap面板标题:标题文本右侧带有省略号和按钮

  11. 11

    PagedList.Mvc省略号按钮不起作用

  12. 12

    文字溢出省略号不起作用

  13. 13

    反应-添加省略号字符不起作用

  14. 14

    CSS文本溢出:在Angular 8中使用CSS网格时省略号不起作用

  15. 15

    具有3个点的CSS“省略号”的Angular 7垫选择问题

  16. 16

    如何用省略号截断长文本,但总是在省略号后显示图标

  17. 17

    带有省略号的动态文本旁边的滑动图标

  18. 18

    用字体真棒图标替换摘录省略号

  19. 19

    截断标题旁边带有省略号的文本

  20. 20

    在省略号上悬停时显示跨度标题

  21. 21

    UIButton 标题太长的省略号未显示

  22. 22

    bootstrap3缩略图网格

  23. 23

    bootstrap3缩略图网格

  24. 24

    Bootstrap 3缩略图滑块

  25. 25

    文字溢出:省略号在有限的显示行中不起作用

  26. 26

    文本溢出:省略号在嵌套的flex容器中不起作用

  27. 27

    为什么text-overflow:省略号在这里不起作用:

  28. 28

    文本溢出:省略号在此元素上不起作用

  29. 29

    文本溢出省略号和flex在Firefox上不起作用

热门标签

归档