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

菲尔克斯94

我想通过使用来限制v芯片的宽度,text-overflow: ellipsis但似乎Vuetifyv-chip无法识别它。

我想避免这个问题: 在此处输入图片说明

<v-chip-group
             v-model="selected"
             mandatory
             column
             active-class="primary--text"
        >
            <v-chip v-for="(item, i) in recipes" :key="i"
                    class="chip-overflow"
                    @click:close="deleteListedRecipe(item)"
                    close>
                {{ item.name }}
            </v-chip>
        </v-chip-group>
    .chip-overflow {
        max-width: 150px;
        padding: 2px 5px;
        display:block;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
永赛A

为了获得预期的结果,请使用以下将省略号CSS添加到v-chip__content类的选项

    .chip-overflow{
            max-width: 150px;
            padding: 2px 5px;
        }


    ::v-deep .v-chip__content {
      display: inline-block !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

 ::v-deep .v-chip__close {
  position: absolute;
  top: 5px;
  right: 0;
  width: 24px;
}

Codepen参考- https://codepen.io/nagasai/pen/oNgMzxq

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

省略号不起作用

来自分类Dev

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

来自分类Dev

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

来自分类Dev

CSS Mask在Firefox上不起作用

来自分类Dev

Google字体在CSS上不起作用

来自分类Dev

CSS“悬停”在滑块上不起作用

来自分类Dev

CSS Calc在Safari上不起作用

来自分类Dev

css 文件在 wahmpserver 上不起作用?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

溢出-x:隐藏;在移动设备上不起作用

来自分类Dev

溢出:隐藏在Chrome上不起作用

来自分类Dev

位置粘滞在带溢出的flexbox上不起作用

来自分类Dev

溢出:隐藏在 Firefox 上不起作用

来自分类Dev

Python文字颜色在Windows上不起作用

来自分类Dev

CSS中的Segoe UI Semilight在Chrome上不起作用

来自分类Dev

CSS动画“从侧面滑入”在Chrome上不起作用

Related 相关文章

  1. 1

    文字溢出省略号不起作用

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

    省略号不起作用

  9. 9

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

  10. 10

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

  11. 11

    CSS Mask在Firefox上不起作用

  12. 12

    Google字体在CSS上不起作用

  13. 13

    CSS“悬停”在滑块上不起作用

  14. 14

    CSS Calc在Safari上不起作用

  15. 15

    css 文件在 wahmpserver 上不起作用?

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

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

  21. 21

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

  22. 22

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

  23. 23

    溢出-x:隐藏;在移动设备上不起作用

  24. 24

    溢出:隐藏在Chrome上不起作用

  25. 25

    位置粘滞在带溢出的flexbox上不起作用

  26. 26

    溢出:隐藏在 Firefox 上不起作用

  27. 27

    Python文字颜色在Windows上不起作用

  28. 28

    CSS中的Segoe UI Semilight在Chrome上不起作用

  29. 29

    CSS动画“从侧面滑入”在Chrome上不起作用

热门标签

归档