文字溢出省略号不起作用

奋斗的编码器

我知道显示类型table-cell不适用于文本溢出省略号。但这就是我的问题。

我有一个文件输入控件,看起来像

<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;">
    <span class="input-group-btn">
        <label class="btn btn-info btn-file" for="multiple_input_group">
            <div class="input required">
                <input id="multiple_input_group" type="file" multiple name="files" ng-files="getTheFiles($files)">
            </div> Browse
        </label>
    </span>
    <span class="file-input-label" ng-model="fileName"></span>
</div>

现在,当您选择一个文件时,该文件名应显示在跨度文本上。

CSS看起来像:

.file-input-label {
    padding: 0px 10px;
    display: table-cell;
    white-space:nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
}

当我们选择一个大的文件名跨度得到扩大。它不带有虚线...

在此处输入图片说明

我试图将显示转换为块,但使UI混乱

.file-input-label {
    padding: 0px 10px;
    display: block;
    width:400px;
    height:20px;
    white-space:nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
}

在此处输入图片说明

在此处输入图片说明

它们现在不是内联的..浏览按钮和span元素都不是内联的。

甚至display:inline-block并没有太大帮助

.file-input-label {
    padding: 0px 10px;
    display: inline-block;
    white-space:nowrap;
    width:400px;
    height:30px;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
}

我想设置跨度的显示

<span class="input-group-btn" style="display:inline-block;">

但这甚至会产生

在此处输入图片说明

需要纠正什么?

马科斯·佩雷斯·古德(MarcosPérezGude)

如果您不想更改,display: table-cell则可以将max-width: 0技巧应用于单元格。它允许为表指定可以应用的名称text-overflow因此,您的更改应为:

.file-input-label {
    padding: 0px 10px;
    display: table-cell;
    white-space:nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 0; /** the only needed change **/
}

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本溢出省略号未以某些自定义字体显示

来自分类Dev

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

来自分类Dev

表格单元格上的文本溢出省略号在IE8和IE9中不起作用

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

省略号不起作用

来自分类Dev

在带有文本溢出省略号的行之后放置图标

来自分类Dev

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

来自分类Dev

列表项的文本溢出省略号并保留数字

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

将文本放置在与第二行文本溢出省略号内联的点后

来自分类Dev

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

来自分类Dev

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

来自分类Dev

在我的情况下,文本溢出省略号不起作用

来自分类Dev

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

来自分类Dev

具有多个跨度的文本溢出省略号

来自分类Dev

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

来自分类Dev

文本溢出省略号不受位置影响:相对

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

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

来自分类Dev

为什么我的溢出和文本溢出:省略号代码在 MS Edge 中不起作用?

Related 相关文章

  1. 1

    文本溢出省略号未以某些自定义字体显示

  2. 2

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

  3. 3

    表格单元格上的文本溢出省略号在IE8和IE9中不起作用

  4. 4

    文字溢出:IE中的省略号

  5. 5

    滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

    省略号不起作用

  10. 10

    在带有文本溢出省略号的行之后放置图标

  11. 11

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

  12. 12

    列表项的文本溢出省略号并保留数字

  13. 13

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

  14. 14

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

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

    将文本放置在与第二行文本溢出省略号内联的点后

  20. 20

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

  21. 21

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

  22. 22

    在我的情况下,文本溢出省略号不起作用

  23. 23

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

  24. 24

    具有多个跨度的文本溢出省略号

  25. 25

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

  26. 26

    文本溢出省略号不受位置影响:相对

  27. 27

    CSS 文本溢出省略号无法正确显示

  28. 28

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

  29. 29

    为什么我的溢出和文本溢出:省略号代码在 MS Edge 中不起作用?

热门标签

归档