如何在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 的回答，它可以用 a 替换名称中第一次出现的空格字符<br>，这里有一个解决方案，<br>如果名称由 3 或 4 个单词组成，因此有 2或 3 个空格字符。为此，我使用了nth_occurrence()从这个答案中提取的函数，由 Marten找到字符串中字符的第 nreplaceAt()次出现，以及从这个答案中提取的函数用 Alnitak的字符串替换特定索引处的字符。不幸的是，堆栈片段不起作用，因此我在这个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);

  });

});