文本较大时如何将文本移到同一行的新行

Question

I am working on HTML table and i am stuck here for very long now, I have a requirement of displaying table into four columns/grid which i have done

Now when i am rendering the table i am displaying first 17 rows in one go than next 17 after five seconds

What is the issue

• some ItemNames are big like BIG BANAYAN CARBINET SAUVIGNON BY GLASS
• So when page is refreshing after five seconds the the column which contains this long name gets very large width which is not good to see as on UI
• I am trying to make the width of each column uniform all four will have same width
• So when the long ITEM NAME is coming what I am trying to do is to use word-wrap: normal; to break it after some width,but it is not working
• I am dividing the four columns into equal part, which ever screen it is rendering the table it should be divided into 4 parts and when ITEMNAME is large i want to display it into same row but in new line after that exceeds the width of column
• I think i have to give some sort of height to all the rows when it can accept one single small item name then it will show in single row but when the name is large it should show in same row but in two lines with same font

 $(document).ready(function() { var tableValue = [{ "Item Name": "MANCHOW V SOUP", "SellingPrice": 100 }, { "Item Name": "MANCHOW NV SOUP ", "SellingPrice": 125 }, { "Item Name": "CEASER SALAD V", "SellingPrice": 175 }, { "Item Name": "CEASER SALAD NV", "SellingPrice": 230 }, { "Item Name": "GAMBUS REBOZADAS", "SellingPrice": 350 }, { "Item Name": "PANCO FISH FINGER", "SellingPrice": 270 }, { "Item Name": "MUSHROOM DUPLEX", "SellingPrice": 160 }, { "Item Name": "FRENCH FRIES", "SellingPrice": 99 }, { "Item Name": "HONEY GARLIC PRAWN", "SellingPrice": 350 }, { "Item Name": "CHICKEN MANCHURIAN", "SellingPrice": 180 }, { "Item Name": "MUSHROOM CHILLY", "SellingPrice": 120 }, { "Item Name": "SALT N PEPPER BABY CORN", "SellingPrice": 120 }, { "Item Name": "SOUTHERN STYLE CHICKEN", "SellingPrice": 210 }, { "Item Name": "PANEER NAGGETS", "SellingPrice": 210 }, { "Item Name": "HARA BHARA KEBAB", "SellingPrice": 160 }, { "Item Name": "CHICKEN TIKKA", "SellingPrice": 210 }, { "Item Name": "KALMI KEBAB", "SellingPrice": 250 }, { "Item Name": "PIZZA MARGARITTA", "SellingPrice": 200 }, { "Item Name": "PIZZA VEG FARMHOUSE", "SellingPrice": 200 }, { "Item Name": "BBQ CHICKEN PIZZA", "SellingPrice": 225 }, { "Item Name": "CHICKEN TIKKA PIZZA", "SellingPrice": 225 }, { "Item Name": "PESTO SAUCE", "SellingPrice": 175 }, { "Item Name": "ARABIATA", "SellingPrice": 160 }, { "Item Name": "PINK SAUCE", "SellingPrice": 160 }, { "Item Name": "GARBANZO BEAN SALAD", "SellingPrice": 90 }, { "Item Name": "MASALA PAPAD", "SellingPrice": 50 }, { "Item Name": "PEANUT MASALA", "SellingPrice": 60 }, { "Item Name": "GAJAR KA HALWA", "SellingPrice": 90 }, { "Item Name": "WATERMELON MARTINI", "SellingPrice": 281 }, { "Item Name": "Kiwi martini", "SellingPrice": 281 }, { "Item Name": " Apple gin", "SellingPrice": 225 }, { "Item Name": "Cucumber cooler ", "SellingPrice": 281 }, { "Item Name": "Martini", "SellingPrice": 225 }, { "Item Name": "Pink lady", "SellingPrice": 225 }, { "Item Name": " Bloody marry", "SellingPrice": 281 }, { "Item Name": "Cosmopolitan", "SellingPrice": 281 }, { "Item Name": "Sex on the beach", "SellingPrice": 281 }, { "Item Name": "Bull frog", "SellingPrice": 506 }, { "Item Name": "Long island iced tea ", "SellingPrice": 393 }, { "Item Name": "Pinacolada", "SellingPrice": 225 }, { "Item Name": "Daiquiri", "SellingPrice": 225 }, { "Item Name": "Mojito ", "SellingPrice": 281 }, { "Item Name": "Whisky sour", "SellingPrice": 281 }, { "Item Name": "Hot toddy", "SellingPrice": 225 }, { "Item Name": "Margarita", "SellingPrice": 337 }, { "Item Name": "Tequila sunrise", "SellingPrice": 337 }, { "Item Name": "Red sangria", "SellingPrice": 225 }, { "Item Name": "White sangria", "SellingPrice": 247 }, { "Item Name": "Rose sangria", "SellingPrice": 247 }, { "Item Name": "By chance special ", "SellingPrice": 168 }, { "Item Name": "Made in heaven", "SellingPrice": 168 }, { "Item Name": "Strawberry delight", "SellingPrice": 168 }, { "Item Name": "DRAGON", "SellingPrice": 168 }, { "Item Name": "Mangochil ", "SellingPrice": 168 }, { "Item Name": "Cucumber cola", "SellingPrice": 168 }, { "Item Name": "Virgin mojito", "SellingPrice": 168 }, { "Item Name": "Virgin mary", "SellingPrice": 168 }, { "Item Name": "Virgin pinacolada", "SellingPrice": 168 }, { "Item Name": "CORONA", "SellingPrice": 438 }, { "Item Name": "CRAFT BEERS", "SellingPrice": 337 }, { "Item Name": "BIRA WHITE 330", "SellingPrice": 157 }, { "Item Name": "BIRA BLONDE 330", "SellingPrice": 135 }, { "Item Name": "BIRA STRONG 650", "SellingPrice": 213 }, { "Item Name": "KINGFISHER PREMIUM 330", "SellingPrice": 123 }, { "Item Name": "KINGFISHER PREMIUM 650", "SellingPrice": 202 }, { "Item Name": "KINGFISHER STRONG 330", "SellingPrice": 135 }, { "Item Name": "KINGFISHER STRONG 650", "SellingPrice": 213 }, { "Item Name": "KINGFISHER ULTRA 330", "SellingPrice": 146 }, { "Item Name": "KINGFISHER ULTRA 650", "SellingPrice": 281 }, { "Item Name": "KINGFISHER ULTRA MAX 330", "SellingPrice": 146 }, { "Item Name": "KINGFISHER ULTRA MAX 650", "SellingPrice": 281 }, { "Item Name": "BUDWIESER 330", "SellingPrice": 146 }, { "Item Name": "BUDWIESER 650", "SellingPrice": 270 }, { "Item Name": "BUDWIESER MAGNUM 330", "SellingPrice": 168 }, { "Item Name": "BUDWIESER MAGNUM 650", "SellingPrice": 281 }, { "Item Name": "TUBORG 330", "SellingPrice": 123 }, { "Item Name": "TUBORG 650", "SellingPrice": 191 }, { "Item Name": "TUBORG STRONG 330", "SellingPrice": 123 }, { "Item Name": "TUBORG STRONG 650", "SellingPrice": 213 }, { "Item Name": "CRANBERRY ", "SellingPrice": 157 }, { "Item Name": "ORANGE", "SellingPrice": 157 }, { "Item Name": "JAMICAN", "SellingPrice": 157 }, { "Item Name": "BLACK BERRY", "SellingPrice": 157 }, { "Item Name": "BLUE BERRY", "SellingPrice": 157 }, { "Item Name": "MOET CHANDON", "SellingPrice": 7875 }, { "Item Name": "SULA BRUT", "SellingPrice": 1687 }, { "Item Name": "MATEUS ROSE", "SellingPrice": 2137 }, { "Item Name": "HARDYS SIRAZ CABERNET 750", "SellingPrice": 1890 }, { "Item Name": "HARDYS SIRAZ CABERNET BY GLASS", "SellingPrice": 382 }, { "Item Name": "JACOB CREEK SIRAZ 750", "SellingPrice": 1800 }, { "Item Name": "JACOB CREEK SIRAZ BY GLASS", "SellingPrice": 360 }, { "Item Name": "BIG BANAYAN CHENNIN BLANC 750", "SellingPrice": 990 }, { "Item Name": "BIG BANAYAN CHENNIN BLANC BY GLASS", "SellingPrice": 202 }, { "Item Name": "SULA CHENIN BLANC 750 ", "SellingPrice": 1293 }, { "Item Name": "SULA CHENIN BLANC BY GLASS", "SellingPrice": 258 }, { "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC 7", "SellingPrice": 1125 }, { "Item Name": "FOUR SEAZON CLASSIC CHENNIN BLANC B", "SellingPrice": 225 }, { "Item Name": "BIG BANAYAN CARBINET SAUVIGNON 750", "SellingPrice": 1125 }, { "Item Name": "BIG BANAYAN CARBINET SAUVIGNON BY G", "SellingPrice": 225 }, { "Item Name": "SULA SATORI MERLOT 750", "SellingPrice": 1237 }, { "Item Name": "SULA SATORI MERLOT BY GLASS", "SellingPrice": 247 }, { "Item Name": "GROVERS LA RESERVE 750", "SellingPrice": 1800 }, { "Item Name": "GROVERS LA RESERVE 100", "SellingPrice": 360 }, { "Item Name": "GLENFIDDICH 12 YEARS 700 ", "SellingPrice": 9225 }, { "Item Name": "GLENFIDDICH 12 YEARS 30", "SellingPrice": 405 }, { "Item Name": "TALISKER 750", "SellingPrice": 8775 }, { "Item Name": "TALISKER 30", "SellingPrice": 360 }, { "Item Name": "GLENNLIVET 750", "SellingPrice": 8887 }, { "Item Name": "GLENNLIVET 30", "SellingPrice": 360 }, { "Item Name": "THE SINGLETON 750", "SellingPrice": 7942 }, { "Item Name": "THE SINGLETON 30", "SellingPrice": 326 }, { "Item Name": "AMRUT FUSION 750", "SellingPrice": 5062 }, { "Item Name": "AMRUT FUSION 30", "SellingPrice": 202 }, { "Item Name": "JACK DANIELS 750", "SellingPrice": 7312 }, { "Item Name": "JACK DANIELS 30", "SellingPrice": 292 }, { "Item Name": "JIM BEAM WHITE 750", "SellingPrice": 4095 }, { "Item Name": "JIM BEAM WHITE 30", "SellingPrice": 168 }, { "Item Name": "JAMESON 750", "SellingPrice": 4950 }, { "Item Name": "JAMESON 30", "SellingPrice": 202 }, { "Item Name": "JW BLACK LABEL 750", "SellingPrice": 8212 }, { "Item Name": "JW BLACK LABEL 200", "SellingPrice": 2925 }, { "Item Name": "JW BLACK LABEL 30", "SellingPrice": 337 }, { "Item Name": "JW RED LABEL 200", "SellingPrice": 1158 }, { "Item Name": "BALLENTINSE FINEST BLENDED 750", "SellingPrice": 4545 }, { "Item Name": "BALLENTINSE FINEST BLENDED 30", "SellingPrice": 180 }, { "Item Name": "BLACK \& WHITE 375", "SellingPrice": 1575 }, { "Item Name": "BLACK \& WHITE 180", "SellingPrice": 787 }, { "Item Name": "BLACK \& WHITE 60", "SellingPrice": 258 }, { "Item Name": "BLACK \& WHITE 30", "SellingPrice": 135 }, { "Item Name": "100 PIPERS 180", "SellingPrice": 787 }, { "Item Name": "100 PIPERS 60", "SellingPrice": 258 }, { "Item Name": "100 PIPERS 30", "SellingPrice": 135 }, { "Item Name": "VAT 69 180", "SellingPrice": 675 }, { "Item Name": "VAT 69 60", "SellingPrice": 225 }, { "Item Name": "VAT 69 30", "SellingPrice": 112 }, { "Item Name": "TEACHERS HIGHLAND 180", "SellingPrice": 787 }, { "Item Name": "TEACHERS HIGHLAND 60", "SellingPrice": 258 }, { "Item Name": "TEACHERS HIGHLAND 30", "SellingPrice": 135 }, { "Item Name": "TEACHERS 50 60", "SellingPrice": 393 }, { "Item Name": "TEACHERS 50 30", "SellingPrice": 202 }, { "Item Name": "BLACK DOG TRIPPLE GOLD 180", "SellingPrice": 1215 }, { "Item Name": "BLACK DOG TRIPPLE GOLD 30", "SellingPrice": 213 }, { "Item Name": "BLACK DOG 8 YEARS 180", "SellingPrice": 731 }, { "Item Name": "BLACK DOG 8 YEARS 60", "SellingPrice": 247 }, { "Item Name": "BLACK DOG 8 YEARS 30", "SellingPrice": 123 }, { "Item Name": "BLENDERS PRIDE 750", "SellingPrice": 2283 }, { "Item Name": "BLENDERS PRIDE 375", "SellingPrice": 1147 }, { "Item Name": "BLENDERS PRIDE 180", "SellingPrice": 573 }, { "Item Name": "BLENDERS PRIDE 60", "SellingPrice": 191 }, { "Item Name": "BLENDERS PRIDE 30", "SellingPrice": 90 }, { "Item Name": "SIGNATURE 180", "SellingPrice": 450 }, { "Item Name": "SIGNATURE 60", "SellingPrice": 168 }, { "Item Name": "SIGNATURE 30", "SellingPrice": 90 }, { "Item Name": "GREY GOOSE 750", "SellingPrice": 8190 }, { "Item Name": "GREY GOOSE 30", "SellingPrice": 326 }, { "Item Name": "BELVEDERE 700", "SellingPrice": 8122 }, { "Item Name": "BELVEDERE 30", "SellingPrice": 360 }, { "Item Name": "CIROC 750", "SellingPrice": 7425 }, { "Item Name": "CIROC 30", "SellingPrice": 303 }, { "Item Name": "ABSOLUT 750", "SellingPrice": 4556 }, { "Item Name": "ABSOLUT 30", "SellingPrice": 191 }, { "Item Name": "SMIRNOFF RED 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF RED 60", "SellingPrice": 202 }, { "Item Name": "SMIRNOFF RED30", "SellingPrice": 101 }, { "Item Name": "SMIRNOFF ORANGE 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF ORANGE 60", "SellingPrice": 202 }, { "Item Name": "SMINOFF ORANGE30", "SellingPrice": 101 }, { "Item Name": "SMIRNOFF GREEN APPLE 180", "SellingPrice": 551 }, { "Item Name": "SMIRNOFF GREEN APPLE 60", "SellingPrice": 202 }, { "Item Name": "SMIRNOFF GREEN APPLE30", "SellingPrice": 101 }, { "Item Name": "BOMBAY SAPHIRE 750", "SellingPrice": 4725 }, { "Item Name": "BOMBAY SAPHIRE 30", "SellingPrice": 191 }, { "Item Name": "BLUE RIBBAND 750", "SellingPrice": 877 }, { "Item Name": "BLUE RIBBAND 60", "SellingPrice": 78 }, { "Item Name": "BACCARDI WHITE 750", "SellingPrice": 2418 }, { "Item Name": "BACCARDI WHITE 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI WHITE 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI WHITE 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI LEMON 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI LEMON 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI LEMON 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI ORANGE 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI ORANGE 60", "SellingPrice": 202 }, { "Item Name": "BACCARDI LEMON 30", "SellingPrice": 101 }, { "Item Name": "BACCARDI BLACK 180", "SellingPrice": 393 }, { "Item Name": "BACCARDI BLACK 30", "SellingPrice": 67 }, { "Item Name": "BACCARDI GOLD 180", "SellingPrice": 585 }, { "Item Name": "BACCARDI GOLD30", "SellingPrice": 101 }, { "Item Name": "OLD MONK 180", "SellingPrice": 225 }, { "Item Name": "OLD MONK 90", "SellingPrice": 168 }, { "Item Name": "OLD MONK 60", "SellingPrice": 90 }, { "Item Name": "OLD MONK 30 ", "SellingPrice": 45 }, { "Item Name": "DON ANGEL 750", "SellingPrice": 4668 }, { "Item Name": "DON ANGEL 30", "SellingPrice": 191 }, { "Item Name": "SAUZA SILVER 700", "SellingPrice": 6153 }, { "Item Name": "SAUZA SILVER 30", "SellingPrice": 270 }, { "Item Name": "JAGERBOMB", "SellingPrice": 506 }, { "Item Name": "KAMAKAZI", "SellingPrice": 168 }, { "Item Name": "JAGERMASTER", "SellingPrice": 303 }, { "Item Name": "COINTTRAEU", "SellingPrice": 303 }, { "Item Name": "SAMBUCA", "SellingPrice": 258 }, { "Item Name": "KHALUA", "SellingPrice": 168 }, { "Item Name": "MARTINI BLANCO", "SellingPrice": 90 }, { "Item Name": "MARTINI ROSSO", "SellingPrice": 90 }, { "Item Name": "HENESSY VS 700", "SellingPrice": 7875 }, { "Item Name": "HENESSY VS 30", "SellingPrice": 348 }, { "Item Name": "MORPHEUS 750", "SellingPrice": 2182 }, { "Item Name": "MORPHEUS 180", "SellingPrice": 540 }, { "Item Name": "MORPHEUS 60", "SellingPrice": 191 }, { "Item Name": "MORPHEUS 30", "SellingPrice": 101 }, { "Item Name": "MANSION HOUSE 180", "SellingPrice": 292 }, { "Item Name": "MANSION HOUSE 90", "SellingPrice": 168 }, { "Item Name": "MANSION HOUSE 60", "SellingPrice": 90 }, { "Item Name": "MC BRANDY 60", "SellingPrice": 90 }, { "Item Name": "RED BULL ", "SellingPrice": 157 }, { "Item Name": "COKE", "SellingPrice": 45 }, { "Item Name": "SPRITE", "SellingPrice": 45 }, { "Item Name": "SODA", "SellingPrice": 33 }, { "Item Name": "DIET COKE", "SellingPrice": 56 }, { "Item Name": "TONIC WATER", "SellingPrice": 67 }, { "Item Name": "GINGER ALE", "SellingPrice": 67 }, { "Item Name": "LIME SODA", "SellingPrice": 45 }, { "Item Name": "LIME WATER", "SellingPrice": 45 }, { "Item Name": "PACKEGED WATER 1L", "SellingPrice": 39 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }, { "Item Name": "MANSION HOUSE 650", "SellingPrice": 900 }, { "Item Name": "Chole Kulche", "SellingPrice": 80 }, { "Item Name": "Butter Nan", "SellingPrice": 65 }, { "Item Name": "Dhai", "SellingPrice": 20 }, { "Item Name": "Rice", "SellingPrice": 55 }, { "Item Name": "Plain rice", "SellingPrice": 30 }] myFun(); window.setInterval(showRows, 5000); showRows(); function myFun() { addTable(tableValue); } function showRows() { // Any TRs that are not hidden and not already shown get "already-shown" applied $("tr:not(.hidden):not(.already-shown)").addClass("already-shown"); // Then your previous code $(".hidden:lt(15)").removeClass("hidden"); // this one is to hide previous 5 rows and show next five } function addTable(tableValue) { var $tbl = $("<table />", { "class": "table" }), $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); } }); 

 tbody>tr>td { white-space: normal; border-collapse: collapse; font-family: Verdana; font-weight: bold; white-space: nowrap; } td { word-break: break-all; } .color1 { background: #4AD184; } .color2 { background: #EA69EF; } .color3 { background: #E1A558; } .color4 { background: #F4F065; } .hidden, .already-shown { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <table class="table" id="DisplayTable"> </table> 

Answer 1

Your css cdn link is wrong. there is no such file . Please replace with below cdn link.

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

Then you are rendering table inside another table which is wrong practice.

Please replace with below html

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

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

Add one more css

.fixed {
        table-layout: fixed;
   }

Then add css class to your script

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);
        }

Answer 2

You are getting the data in four rows using the for loop. I would suggest you should use bootstrap class="col-sm-3" in your html file table tag. This wraps the string how long it is and displays four rows with equal space. Also import

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Answer 3

Use flexbox to simplify the table structure. Have a look at this fiddle

Render this HTML structure from JS:

<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>

CSS:

.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;
}