JavaScript 多行字符串对齐

发布于 2022-09-12 13:07:07 字数 487 浏览 12 评论 0

json格式数据如下:
    [{'name':'张三','pcs':'40','total':'3600'},
    {'name':'李老五','pcs':'2','total':'400'},
    {'name':'Jack','pcs':'121','total':'59800'},
    {'name':'王-ADU','pcs':'21','total':'1130'}]
拼接成字符串,用 js 怎样解决对齐问题,请大神帮助下,万分感谢!

张三 40单 3600件
李老五 2单 400件
Jack 121单 59800件
王-ADU 21单 1130件

想要达到的效果如下图

image

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

巡山小妖精 2022-09-19 13:07:07

你这不是table吗,样式自己写下就行了,;
左对齐 text-align:left;
右对齐 text-align:right;
还是我理解错你的意思了???

感受沵的脚步 2022-09-19 13:07:07

这个其实应该是前端展示的时候考虑的数据吧,分栏处理就好解决。这里主要是数字和字母等等与汉字不等宽,容易造成展示问题。
不过也有其他的方法,每行分3个部分填充,填充后统计个部分最长宽度,注意汉字符算2个,其他算一个,这样每部分以最长字符数为基准,再填补个空白字符为隔离字符(注意不同的对齐方式隔离字符填充的位置不同),其它行相对的部分都以此总长度进行空白填充,然后把没行接在一起。

一生独一 2022-09-19 13:07:07

2楼回答正解,这设置个样式就行

有深☉意 2022-09-19 13:07:07

https://jsbin.com/wucavabazi/edit?html,js,output

最简单的实现

pre 标签, 空格换成 \t

弥繁 2022-09-19 13:07:07

display: table; 去了解下

濫情▎り 2022-09-19 13:07:07

为赚声望随便答个。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文