как установить слова в вертикальной переносе в css

Question

На моей странице HTML есть список динамических c сервисов из базы данных, я просто хочу отобразить список имен этих сервисов как минимум в две строки.

Если имя служба имеет два слова, затем первое слово в первой строке и второе слово во второй строке. Если имя состоит из трех слов, то первые два слова в первой строке и третье слово во второй строке. Но если название службы состоит из трех слов, то оно будет корректироваться по вертикали в две строки, но не будет в три строки.

Я хочу, как показано на рисунке ниже. Так что помоги мне с этим. Решение будет работать на любом языке, CSS или JS.

Но оно не работает в моем коде, я пробовал с следующий код.

$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

Подсчитайте пробелы в строке, если есть только одна, замените на <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);
    });
});

или просто отредактируйте жестко закодированный $list

Answer 2

Основываясь на ответе Лоуренса Чероне, который работает для замены 1-го вхождения пробела в имени на <br>, вот решение, которое также заменяет 2-й пробел символом <br> в случае, если имя состоит из 3 или 4 слов и, следовательно, имеет 2 или 3 пробела. Для этого я использовал функцию nth_occurrence(), взятую из этого ответа Нахождение n-го вхождения символа в строке Мартеном, и функцию replaceAt(), взятую из этого ответа Замена символа в конкретном индекс со строкой от Альнитак. К сожалению, фрагмент стека не работает, поэтому я создал рабочий пример на этом 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);
  });
});