Javascript 当文本较大时，如何将文本移动到同一行的新行

我正在处理HTML表格，我在这里停留了很长时间，我需要将表格显示为四列/网格，我已经完成了这项工作

现在，当我渲染表时，我一次显示前17行，五秒钟后显示下17行

问题出在哪里

• 一些

  商品名

  很大，比如

  大巴纳扬卡宾尼玻璃长相思

• 因此，当页面在5秒钟后刷新时，包含此长名称的列将获得非常大的宽度，这不利于在UI上看到
• 我试图使每一列的宽度一致，所有四列的宽度都相同
• 因此，当长项目名称出现时，我尝试使用

  wordwrap:normal在某个宽度后将其打断，但它不起作用

• 我将四列分成相等的部分，在屏幕上显示表格时，应将其分成四部分，当ITEMNAME较大时，我希望将其显示在同一行中，但在新的行中，其后超出了列的宽度
• 我认为我必须给所有行赋予某种高度，当它可以接受一个单独的小项目名称时，它将显示在一行中，但当名称较大时，它应该显示在同一行中，但在两行中使用相同的字体

$（文档）.ready（函数（）{
var表格值=[{
“商品名称”：“曼肖V汤”，
“销售价格”：100
}, {
“商品名称”：“曼肖NV汤”，
“销售价格”：125
}, {
“项目名称”：“凯瑟沙拉V”，
“销售价格”：175
}, {
“商品名称”：“凯瑟沙拉内华达州”，
“销售价格”：230
}, {
“物品名称”：“GAMBUS REBOZADAS”，
“销售价格”：350
}, {
“项目名称”：“潘科鱼指”，
“销售价格”：270
}, {
“项目名称”：“蘑菇双工”，
“销售价格”：160
}, {
“项目名称”：“炸薯条”，
“销售价格”：99
}, {
“品名”：“蜂蜜蒜虾”，
“销售价格”：350
}, {
“项目名称”：“满洲鸡”，
“销售价格”：180
}, {
“项目名称”：“蘑菇冷”，
“销售价格”：120
}, {
“项目名称”：“盐和胡椒小玉米”，
“销售价格”：120
}, {
“项目名称”：“南式鸡肉”，
“销售价格”：210
}, {
“项目名称”：“PANEER NAGGETS”，
“销售价格”：210
}, {
“物品名称”：“哈拉巴拉烤肉串”，
“销售价格”：160
}, {
“项目名称”：“鸡肉提卡”，
“销售价格”：210
}, {
“物品名称”：“卡尔米烤肉串”，
“销售价格”：250
}, {
“商品名称”：“比萨玛格丽塔”，
“销售价格”：200
}, {
“项目名称”：“比萨蔬菜农舍”，
“销售价格”：200
}, {
“项目名称”：“烧烤鸡肉披萨”，
“销售价格”：225
}, {
“项目名称”：“鸡肉提卡披萨”，
“销售价格”：225
}, {
“项目名称”：“香蒜酱”，
“销售价格”：175
}, {
“项目名称”：“ARABIATA”，
“销售价格”：160
}, {
“项目名称”：“粉红酱汁”，
“销售价格”：160
}, {
“项目名称”：“GARBANZO豆沙拉”，
“销售价格”：90
}, {
“物品名称”：“马萨拉·帕帕德”，
“销售价格”：50
}, {
“项目名称”：“花生马沙拉”，
“销售价格”：60
}, {
“项目名称”：“GAJAR KA HALWA”，
“销售价格”：90
}, {
“商品名称”：“西瓜马提尼”，
“销售价格”：281
}, {
“商品名称”：“猕猴桃马提尼”，
“销售价格”：281
}, {
“商品名称”：“苹果杜松子酒”，
“销售价格”：225
}, {
“项目名称”：“黄瓜冷却器”，
“销售价格”：281
}, {
“品名”：“马提尼”，
“销售价格”：225
}, {
“物品名称”：“粉红女士”，
“销售价格”：225
}, {
“物品名称”：“血腥婚姻”，
“销售价格”：281
}, {
“项目名称”：“世界主义者”，
“销售价格”：281
}, {
“物品名称”：“海滩性爱”，
“销售价格”：281
}, {
“项目名称”：“牛蛙”，
“销售价格”：506
}, {
“品名”：“长岛冰茶”，
“销售价格”：393
}, {
“项目名称”：“Pinacolada”，
“销售价格”：225
}, {
“商品名称”：“Daiquiri”，
“销售价格”：225
}, {
“项目名称”：“莫吉托”，
“销售价格”：281
}, {
“商品名称”：“威士忌酸”，
“销售价格”：281
}, {
“商品名称”：“热托迪”，
“销售价格”：225
}, {
“商品名称”：“玛格丽塔”，
“销售价格”：337
}, {
“品名”：“龙舌兰日出”，
“销售价格”：337
}, {
“物品名称”：“红色桑格里亚”，
“销售价格”：225
}, {
“物品名称”：“白色桑格里亚”，
“销售价格”：247
}, {
“项目名称”：“Rose sangria”，
“销售价格”：247
}, {
“物品名称”：“偶然特殊”，
“销售价格”：168
}, {
“物品名称”：“天造”，
“销售价格”：168
}, {
“商品名称”：“草莓乐”，
“销售价格”：168
}, {
“物品名称”：“龙”，
“销售价格”：168
}, {
“项目名称”：“芒果酱”，
“销售价格”：168
}, {
“商品名称”：“黄瓜可乐”，
“销售价格”：168
}, {
“商品名称”：“维珍莫吉托”，
“销售价格”：168
}, {
“物品名称”：“圣母玛利亚”，
“销售价格”：168
}, {
“物品名称”：“维珍皮纳科拉达”，
“销售价格”：168
}, {
“物品名称”：“电晕”，
“销售价格”：438
}, {
“商品名称”：“工艺啤酒”，
“销售价格”：337
}, {
“项目名称”：“BIRA WHITE 330”，
“销售价格”：157
}, {
“物品名称”：“BIRA BLONDE 330”，
“销售价格”：135
}, {
“物品名称”：“BIRA STRONG 650”，
“销售价格”：213
}, {
“项目名称”：“翠鸟特优330”，
“销售价格”：123
}, {
“商品名称”：“翠鸟特优650”，
“销售价格”：202
}, {
“项目名称”：“翠鸟强330”，
“销售价格”：135
}, {
“项目名称”：“翠鸟强650”，
“销售价格”：213
}, {
“项目名称”：“翠鸟超330”，
“销售价格”：146
}, {
“项目名称”：“翠鸟超650”，
“销售价格”：
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="item already-show">
 <div class="col">
   <span>BIG BANAYAN CHENNIN BLANC BY GLASS</span><span>438</span>
 </div>
 <div class="col">
    <span>JAMESON 750</span><span>4950</span>
 </div>
 <div class="col">
    <span>BACCARDI WHITE 60</span><span>202</span>
 </div>
 <div class="col">
    <span>Plain rice</span><span>30</span>
 </div>
</div>

.item {
  display: flex;
  width:100%
}
.col {
  display: flex;
  padding: .75rem;
  vertical-align: top;
  border: 1px solid #dee2e6;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-12" id="DisplayTable">

        </div>
    </div>
</div>

.fixed {
        table-layout: fixed;
   }

function addTable(tableValue) {
            var $tbl = $("<table />", {
                "class": "table fixed"
            }),
                    $tb = $("<tbody/>"),
                    $trh = $("<tr/>");

            var split = Math.round(tableValue.length / 4);
            for (i = 0; i < split; i++) {
                $tr = $("<tr/>", {
                    class: "hidden"
                }); //ading class
                for (j = 0; j < 4; j++) {
                    $.each(tableValue[split * j + i], function (key, value) {

                        $("<td/>", {
                            "class": "text-left color" + (j + 1)
                        }).html(value).appendTo($tr);
                    });
                }
                $tr.appendTo($tb);
            }
            $tbl.append($tb);
            $("#DisplayTable").html($tbl);
        }