问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

表格组件中如何实现指定一列的宽度，内容自动换行？

头像
月球上的桔子
    5548

    表格中指定一列的宽度，内容按照宽度限制自动换行，单元格的高度由实际内容行数决定
    image.png
    如何在表格组件中实现这个效果？

    前端表格
    阅读 3.5k
    2 个回答
    得票最新
    头像
    方帅
      113513
      ✓ 已被采纳

      建议使用开源图表组件VTable来实现这个功能。
      表格配置中加入以下配置：

      heightMode: 'autoHeight', // 高度模式：自动高度（每一行的高度由内容撑开）
autoWrapText: true, // 打开自动折行配置

      Example代码参考

      const option: TYPES.ListTableConstructorOptions = {
  records,
  columns,
  heightMode: "autoHeight",
  autoWrapText: true
};

      结果展示:
      Results在线效果参考：https://codesandbox.io/s/vtable-autoheight-dktrk4
      图片
      相关文档:
      自动换行demo：https://visactor.io/vtable/demo/basic-functionality/auto-wrap...
      自动换行教程：https://visactor.io/vtable/guide/basic_function/auto_wrap_text
      相关api：https://visactor.io/vtable/option/ListTable#autoWrapText
      https://visactor.io/vtable/option/ListTable#heightMode
      github：https://github.com/VisActor/VTable

      头像
      manyuemeiquqi
        319732

        th 的单元格指定该列的宽度， 然后修改单元格内的换行样式规则

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <style>
    td{
      word-break: break-all;
    }
  </style>
  <table>
    <tr>
      <th>name</th>
      <th>age</th>
      <th style="width: 50px;">desc</th>
    </tr>
    <tr>
      <td>bob</td>
      <td>16</td>
      <td>iwnoawnfwnfowaenfoawneofnawefnoawenfowanf</td>
    </tr>
  </table>

</body>
</html>

        使用组件库的话会默认实现
        element-table

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏