how to set words in vertical wrap in css

Question

In my HTML page I have a list of dynamic services from database, I just want to display a list of names of those services in at least two lines.

If the name of the service has two words then the first word in the first line and the second word in the second line. If the name has three words then the first two words in the first line and the third word in the second line. But if the name of the service has three words, then it will be adjusted vertically in two lines, but it will not be in three lines.

i want as shown in the picture below. So help me with that. The solution will run in any language, CSS or JS.

But it is not working in my code, I tried with the following code.

$list = {
    "CM"   : "Classic Manicure",
    "CU"   : "Clean Up",
    "FCUS" : "Face Clean Up Full Tool Set",
    "FFW"  : "Full Face Waxing",
    "FR"   : "Foot Reflexology",
    "KM"   : "Kids Manicure",
    "FCU"  : "Face Clean Up",
    "GFTK" : "Gel French Tool kit",
};
$(document).ready(function(){
    $.each($list, function(key, name){
        html = '<div class="col">\
            <div>\
                <span class="letter">'+ key +'</span>\
                <div class="name">'+ name +'</div>\
            </div>\
        </div>';
        $('.list').append(html);
    });
});

*, ::after, ::before {
    box-sizing: border-box;
}
.container{
    max-width: 500px;
    margin: 0 auto;
}
.row{
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 24%;
    max-width: 24%;
    margin: 1% .5%;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 25px 5px;
    text-align: center;
    box-shadow: 1px 1px 2px #ddd;
}
span.letter {
    margin: 5px 0;
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    font-family: cursive;
    text-shadow: 1px 1px 1px white, 2px 2px 1px red;
}

.name {
    margin-top: 5px;
    font-size: 16px;
    color: #666;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
    <div class="row list"></div>
</div>

Answer 1

Based on the answer of Lawrence Cherone which works for replacing the 1st occurence of a space character in a name with a <br>, here's a solution that also replaces the 2nd space character with a <br> in case a name consists of 3 or 4 words and therefore has 2 or 3 space characters. For this, I used the function nth_occurrence() taken from this answer Finding the nth occurence of a character in a string by Marten and the function replaceAt() taken from this answer Replacing character at a particular index with a string by Alnitak. Unfortunately, the stack snippet is not working, therefore I've created a working example at this Fiddle.

$list = {
  "CM": "Classic Manicure",
  "CU": "Clean Up",
  "FCUS": "Face Clean Up Full Tool Set",
  "FFW": "Full Face Waxing",
  "FR": "Foot Reflexology",
  "KM": "Kids Manicure",
  "FCU": "Face Clean Up",
  "GFTK": "Gel French Tool kit",
};
$(document).ready(function() {
  function nth_occurrence(string, char, nth) {
    var first_index = string.indexOf(char);
    var length_up_to_first_index = first_index + 1;

    if (nth == 1) {
      return first_index;
    } else {
      var string_after_first_occurrence = string.slice(length_up_to_first_index);
      var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

      if (next_occurrence === -1) {
        return -1;
      } else {
        return length_up_to_first_index + next_occurrence;
      }
    }
  }

  function replaceAt(s, n, t) {
    return s.substring(0, n) + t + s.substring(n + 1);
  }
  $.each($list, function(key, name) {
    if (name.match(/ /g).length === 1) {
      name = name.replace(" ", "<br>")
    } else if (name.match(/ /g).length === 2 || name.match(/ /g).length === 3) {
      let second = nth_occurrence(name, " ", 2)
      name = replaceAt(name, second, "<br>");
    }

    html = '<div class="col">\
            <div>\
                <span class="letter">' + key + '</span>\
                <div class="name">' + name + '</div>\
            </div>\
        </div>';
    $('.list').append(html);
  });
});

Answer 2

Count the spaces within the string, if has only one replace with <br>

$(document).ready(function(){
    $.each($list, function(key, name){
        if (name.match(/ /g).length === 1) 
            name = name.replace(" ", "<br>")

        html = '<div class="col">\
            <div>\
                <span class="letter">'+ key +'</span>\
                <div class="name">'+ name +'</div>\
            </div>\
        </div>';
        $('.list').append(html);
    });
});

or just edit the hardcoded $list