如何在css中设置垂直包裹的单词

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

如果服务的名称有两个字,那么第一行的第一个字,第二行的第二个字,如果名称有三个字,那么第一行的前两个字,第二行的第三个字,但是如果服务的名称有三个字,那么它将在两行中垂直调整,但不会在三行中。

我想如下图所示。所以帮我解决这个问题。这个方案可以在任何语言下运行,CSS或者JS。

I want like this

但它在我的代码中不起作用,我尝试用以下代码。

$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>

解决方案:

计算字符串中的空格,如果只有一个空格,则替换为:”我的服务”。<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

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在postgresql中修剪第3次出现前的记录?

2022-9-9 9:32:22

未分类

如何在ionic框架中安装angularfire?

2022-9-9 9:43:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索