amis的table多文本溢出显示...

最新推荐文章于 2024-12-26 15:11:53 发布

啊柒_

最新推荐文章于 2024-12-26 15:11:53 发布

阅读量831

点赞数 1

CC 4.0 BY-SA版权

分类专栏： amis 文章标签： javascript 前端 css amis

本文链接：https://blog.youkuaiyun.com/kangluon/article/details/129038257

amis 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在表格中控制内容显示，当内容超出时显示省略号。通过配置CSS样式`.line-1`和`.line-2`实现单行和多行溢出隐藏。同时提到了Amis框架中的`truncate`方法，但该方法基于字符数，不满足特定行数显示的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

单行文本溢出

使用场景：

table中控制内容显示1行或多行显示，超出则显示…

实现：

1、配置

{
  "type": "container",
  "label": "任务名称",
  "name": "name",
  "id": "u:0d0778438079",
  "placeholder": "-",
  "className": "font-normal",
  "align": "center",
  "width": 100,
  "body": [
    {
      "type": "tooltip-wrapper",
      "id": "u:f75d8f48ee99",
      "tooltip": "这里是提示内容",
      "body": [
        {
          "type": "tpl",
          "tpl": "这里是表格显示内容",
          "id": "u:0330543bed15",
          "className": "font-normal line-1",
          "wrapperComponent": "",
          "inline": false
        }
      ],
      "enterable": true,
      "showArrow": true,
      "offset": [
        0,
        0
      ]
    }
  ]
}

2、在项目中添加css样式，在配置文件中使用自定义的css

单行溢出隐藏
.line-1{
      width:300upx; /*宽度一定要设置*/
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap; /*超出的空白区域不换行*/
  }
  2行溢出隐藏
.line-2{
    text-overflow: ellipsis;
     word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
     display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
     -webkit-line-clamp: 2; /*多行在这里修改数字即可*/
     -webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
  }

amis中有配置显示…的，但是我看控制的是显示多少字符，这个不符合需求

{
        "type": "tpl",
        "name": "engine",
        "label": "Rendering engine",
        "tpl": "${engine|truncate:6}",
        "popOver": "${engine}"
      }

其他列表类的同理实现