截断省略号,不带宽度

编码人

我正在尝试实现响应列表宽度的文本溢出:省略号;在第一个像这样的单元格中:

单行文本太长,必须... 按钮2 |

整个列表的宽度应为:100%;与设备一样大。我无法在Button 2上设置固定宽度,因为该应用程序是多语言的(尽管应该有一个最大宽度)。

我可以尝试任何我想要的,...仅当我设置固定宽度时才会出现。如何在不使用JavaScript的情况下告诉中间单元“使用可用空间”?

获取输出:

约翰·杜(1)(2)约翰·杜德史费(3)约翰(1)

预期产量:

约翰·杜(1)(2)约翰·杜德史费(3)约翰(1)

CSS:

.truncate-ellipsis {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        -o-text-overflow: ellipsis;
         width: 20%;
}

HTML:

<div ng-app="myApp" ng-controller="validateCtrl">
<ul>
<li><label class="truncate-ellipsis">{{title1}}</label>({{count1}})</li>
<li><label class="truncate-ellipsis">{{title2}}</label>({{count2}})</li>
<li><label class="truncate-ellipsis">{{title3}}</label>({{count3}})</li>
</ul>
</div>

演示

高拉夫·阿格瓦尔(Gaurav Aggarwal)

它也可以使用最大宽度:

.truncate-ellipsis {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    max-width: 20%;
}

范例:https : //jsfiddle.net/U3pVM/24348/

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

UITextView-在iOS 6上截断显示省略号的文本(使用自动布局)

来自分类Dev

在SSRS中用省略号截断文本框内容

来自分类Dev

TextView文本在左侧被截断,而不是省略了省略号

来自分类Dev

用省略号将nvarchar(max)截断为nvarchar(n)

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

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

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

处理省略号

来自分类Dev

Reduce()和...(省略号)

来自分类Dev

灰烬2:截断文字并添加省略号

来自分类Dev

使用CSS省略号在悬停上显示截断的文本会覆盖其下方的文本

来自分类Dev

省略项中的省略号省略

来自分类Dev

在表格单元格内的流体div中将文本截断为省略号

来自分类Dev

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

来自分类Dev

截断文本并添加省略号PHP SQL

来自分类Dev

如何根据其长度截断<span>,并在其中加上省略号(...)

来自分类Dev

具有第二列动态宽度和省略号的固定宽度表

来自分类Dev

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

来自分类Dev

结构省略号

来自分类Dev

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

来自分类Dev

在SSRS中用省略号截断文本框内容

来自分类Dev

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

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

选择对象上的空格和带有省略号的截断

来自分类Dev

JavaScript链接省略号

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

在表格单元格内的流体div中将文本截断为省略号

来自分类Dev

省略号以限制离子的文本高度和宽度

来自分类Dev

使用省略号截断 <a> 中的字符串,但最后保留 img - 没有 JS

Related 相关文章

  1. 1

    UITextView-在iOS 6上截断显示省略号的文本(使用自动布局)

  2. 2

    在SSRS中用省略号截断文本框内容

  3. 3

    TextView文本在左侧被截断,而不是省略了省略号

  4. 4

    用省略号将nvarchar(max)截断为nvarchar(n)

  5. 5

    CSS文字省略号和100%宽度

  6. 6

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

  7. 7

    带省略号的浮动div的CSS-宽度未知

  8. 8

    处理省略号

  9. 9

    Reduce()和...(省略号)

  10. 10

    灰烬2:截断文字并添加省略号

  11. 11

    使用CSS省略号在悬停上显示截断的文本会覆盖其下方的文本

  12. 12

    省略项中的省略号省略

  13. 13

    在表格单元格内的流体div中将文本截断为省略号

  14. 14

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

  15. 15

    截断文本并添加省略号PHP SQL

  16. 16

    如何根据其长度截断<span>,并在其中加上省略号(...)

  17. 17

    具有第二列动态宽度和省略号的固定宽度表

  18. 18

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

  19. 19

    结构省略号

  20. 20

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

  21. 21

    在SSRS中用省略号截断文本框内容

  22. 22

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

  23. 23

    带省略号的浮动div的CSS-宽度未知

  24. 24

    选择对象上的空格和带有省略号的截断

  25. 25

    JavaScript链接省略号

  26. 26

    以“ 100%”宽度div显示省略号

  27. 27

    在表格单元格内的流体div中将文本截断为省略号

  28. 28

    省略号以限制离子的文本高度和宽度

  29. 29

    使用省略号截断 <a> 中的字符串,但最后保留 img - 没有 JS

热门标签

归档