自适应flex-item内英文自动折行后的宽度问题「这是我参与2022首次更文挑战的第N天，活动详情查看：2022首次更

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

问题：英文单词换行有很大间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent-flex{
            line-height: 1.5;
            margin: auto;
            margin-top: 200px;
            width: 150px;
            background-color: lightgray;
            display: flex;
            align-items: center;
        }
        .title{
            outline: 1px solid seagreen;
            /* word-break: break-all; */
        }
        .badge{
            background-color: rgb(190, 61, 61);
            height: 24px;
            width: 50px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <div class="parent-flex">
        <span class="title">
            looooong tecccccxt
            <!-- longlonglonglonglong   text -->
        </span>
        <div class="badge">
            vip
        </div>
    </div>

    
</body>
</html>

改成80 间距就缩小了

css添加这个就可以了

word-break: break-all;

用了flex 布局里面的子元素display：block

用js怎么实现呢？

首先需要在span标签外面套一层div

里面的span为auto

class="title" 加到div上面

js：


    <script>
        var titles = document.querySelectorAll(".title");
        titles.forEach(t => {
            t.style.width = t.querySelector('span').offsetWidth + 'px'
        })
    </script>

自适应flex-item内英文自动折行后的宽度问题

问题 ： 英文单词换行 有很大间距

用js怎么实现呢？

js：

问题：英文单词换行有很大间距