如何在css中将单词设置为垂直换行

Question

在我的 HTML 页面中，我有一个来自数据库的动态服务列表，我只想在至少两行中显示这些服务的名称列表。

如果服务名称有两个单词，则第一行中的第一个单词和第二行中的第二个单词。 如果名称包含三个单词，则第一行中的前两个单词和第二行中的第三个单词。 但是如果服务的名字是三个字的话，那么会纵向调整两行，但不会是三行。

我想要如下图所示。所以帮我解决这个问题。该解决方案将以任何语言、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

根据 Lawrence Cherone 的回答，该回答适用于用 <br> 替换名称中第一次出现的空格字符，这里有一个解决方案，如果名称包含3 或 4 个单词，因此有 2 或 3 个空格字符。为此，我使用了 Marten 的这个答案 Finding the nth occurence of a character in a string 中的函数 nth_occurrence() 和 Alnitak 的这个答案 Replacing character at a particular index with a string 中的函数 replaceAt()。不幸的是，堆栈 sn-p 不起作用，因此我在 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);
  });
});