如何在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(){&nbsp; &nbsp; $.each($list, function(key, name){&nbsp; &nbsp; &nbsp; &nbsp; if (name.match(/ /g).length === 1)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name = name.replace(" ", "<br>")&nbsp; &nbsp; &nbsp; &nbsp; html = '<div class="col">\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="letter">'+ key +'</span>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="name">'+ name +'</div>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>\&nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; $('.list').append(html);&nbsp; &nbsp; });});或者只是编辑硬编码$list

Answer 2

根据 Lawrence Cherone 的回答，它可以用 a 替换名称中第一次出现的空格字符<br>，这里有一个解决方案，<br>如果名称由 3 或 4 个单词组成，因此有 2或 3 个空格字符。为此，我使用了nth_occurrence()从这个答案中提取的函数，由 Marten找到字符串中字符的第 nreplaceAt()次出现，以及从这个答案中提取的函数用 Alnitak的字符串替换特定索引处的字符。不幸的是，堆栈片段不起作用，因此我在这个Fiddle创建了一个工作示例。$list = {&nbsp; "CM": "Classic Manicure",&nbsp; "CU": "Clean Up",&nbsp; "FCUS": "Face Clean Up Full Tool Set",&nbsp; "FFW": "Full Face Waxing",&nbsp; "FR": "Foot Reflexology",&nbsp; "KM": "Kids Manicure",&nbsp; "FCU": "Face Clean Up",&nbsp; "GFTK": "Gel French Tool kit",};$(document).ready(function() {&nbsp; function nth_occurrence(string, char, nth) {&nbsp; &nbsp; var first_index = string.indexOf(char);&nbsp; &nbsp; var length_up_to_first_index = first_index + 1;&nbsp; &nbsp; if (nth == 1) {&nbsp; &nbsp; &nbsp; return first_index;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; var string_after_first_occurrence = string.slice(length_up_to_first_index);&nbsp; &nbsp; &nbsp; var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);&nbsp; &nbsp; &nbsp; if (next_occurrence === -1) {&nbsp; &nbsp; &nbsp; &nbsp; return -1;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return length_up_to_first_index + next_occurrence;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; function replaceAt(s, n, t) {&nbsp; &nbsp; return s.substring(0, n) + t + s.substring(n + 1);&nbsp; }&nbsp; $.each($list, function(key, name) {&nbsp; &nbsp; if (name.match(/ /g).length === 1) {&nbsp; &nbsp; &nbsp; name = name.replace(" ", "<br>")&nbsp; &nbsp; } else if (name.match(/ /g).length === 2 || name.match(/ /g).length === 3) {&nbsp; &nbsp; &nbsp; let second = nth_occurrence(name, " ", 2)&nbsp; &nbsp; &nbsp; name = replaceAt(name, second, "<br>");&nbsp; &nbsp; }&nbsp; &nbsp; html = '<div class="col">\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="letter">' + key + '</span>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="name">' + name + '</div>\&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>\&nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; $('.list').append(html);&nbsp; });});