如何使用文字溢出:省略号?

亚瑟·谢赫(Yasser Shaikh)

我有以下html- http://jsfiddle.net/o8e4n30n/

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
        <span class="txt">Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadssto odio asdasda sdas dasdasdasda sdadadsadsodio asdasda sdas dasdasdasda sdadadsads</span>
    </li>
</ul>

我想使用text-overflow省略号属性,以便仅用...显示单行,而不是现在显示的3行

即从

信用评级机构胡斯托申通快递奥迪奥asdasda SDAS dasdasdasda sdadadsadssto奥迪奥asdasda SDAS dasdasdasda sdadadsadssto奥迪奥asdasda SDAS dasdasdasda sdadadsadsodio asdasda sdasdasdasda sdadadsads

Cras justo sto odio asdasda sdas dasdasdasda sdadadsadssto dios asosda sdas dasdasdasd…

请指教。

罗比·科尼利森(Robby Cornelissen)

我已经更新了您的小提琴以添加必要的样式:

.list-group-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

文本必须在一行中(因此为white-space: nowrap),并溢出一个隐藏了溢出的框(因此为overflow: hidden)。

我将样式应用于list元素,因为默认情况下它是一个块级元素。如果您要在上应用,则span必须添加display: block规则,或添加display: inline-block带有关联规则width

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在嵌套函数中正确使用省略号

来自分类Dev

如何将不透明度应用于文本溢出:省略号

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

带省略号的段落溢出

来自分类Dev

溢出问题:隐藏和文本溢出:省略号

来自分类Dev

如何选择我的溢出省略号开始的位置

来自分类Dev

如何使用CSS实现单行省略号

来自分类Dev

如何从文本溢出中删除三个点:省略号?

来自分类Dev

为什么我的文字溢出:省略号;没有工作吗?

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

如何在Bootstrap响应表中使用省略号

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何在AntDesign的Table组件中添加省略号以溢出文本?

来自分类Dev

Angular Material如何获取复选框文本溢出省略号

来自分类Dev

如何使用省略号文本溢出来适应卡的高度

来自分类Dev

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

来自分类Dev

如何使文本溢出省略号3点可点击?

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

为什么我的文字溢出:省略号;没有工作吗?

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

文本溢出:省略号不被尊重

来自分类Dev

在 Java 中使用省略号时如何传递数组?

来自分类Dev

使用 vue-material,如何让文本换行而不是溢出到列表中的省略号?

Related 相关文章

  1. 1

    如何在嵌套函数中正确使用省略号

  2. 2

    如何将不透明度应用于文本溢出:省略号

  3. 3

    文字溢出:IE中的省略号

  4. 4

    Flexbox和文本溢出:省略号混合使用吗?

  5. 5

    CSS文字溢出省略号+以%表示的宽度无效

  6. 6

    带省略号的段落溢出

  7. 7

    溢出问题:隐藏和文本溢出:省略号

  8. 8

    如何选择我的溢出省略号开始的位置

  9. 9

    如何使用CSS实现单行省略号

  10. 10

    如何从文本溢出中删除三个点:省略号?

  11. 11

    为什么我的文字溢出:省略号;没有工作吗?

  12. 12

    文字溢出的样式点:省略号

  13. 13

    文字溢出省略号不起作用

  14. 14

    如何在Bootstrap响应表中使用省略号

  15. 15

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

  16. 16

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

  17. 17

    如何在AntDesign的Table组件中添加省略号以溢出文本?

  18. 18

    Angular Material如何获取复选框文本溢出省略号

  19. 19

    如何使用省略号文本溢出来适应卡的高度

  20. 20

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

  21. 21

    如何使文本溢出省略号3点可点击?

  22. 22

    文字溢出:省略号;不截断溢出文本并给出省略号

  23. 23

    CSS文字溢出:省略号不取决于宽度

  24. 24

    Flexbox和文本溢出:省略号混合使用吗?

  25. 25

    为什么我的文字溢出:省略号;没有工作吗?

  26. 26

    文字溢出的样式点:省略号

  27. 27

    文本溢出:省略号不被尊重

  28. 28

    在 Java 中使用省略号时如何传递数组?

  29. 29

    使用 vue-material,如何让文本换行而不是溢出到列表中的省略号?

热门标签

归档