父元素的宽度由最短的文字长度决定

hpz1223

已于 2024-03-15 23:49:57 修改

阅读量379

点赞数 11

分类专栏： #CSS系列文章标签： html 前端 css

于 2024-03-15 23:48:49 首次发布

本文链接：https://blog.csdn.net/qq_54140719/article/details/136752338

版权

#CSS系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一般情况下父元素的宽度总是被其最宽的子元素撑开，导致盒子被撑的很大，而短的元素则占比很小，不太平衡。

<!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>
</head>
<body>
    <div class="fa">
        <div class="son1"><h1>我是短文字</h1></div>
        <div class="son2">我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦,我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦,我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
    </div>
</body>
<style>
    .fa {
        /* 宽度由内容填充 */
        width: fit-content;
        background-color: aqua;
    }
</style>
</html>

如果能使得父盒子宽度跟随短的文字长度变化，而长的文字段跟随父盒子，这样，父盒子中的两段文字就会一样长。

<!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>
</head>
<body>
    <div class="fa">
        <div class="son1"><h1>我是短文字，变长了，下面的元素也跟着变宽</h1></div>
        <div class="son2">我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦,我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦,我是长文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
    </div>
</body>
<style>
    .fa {
        /* 宽度由内容填充 */
        background-color: aqua;
        /* 设置最大宽度为最小的内容宽度 */
        max-width: min-content;
        /* 也可以自己定义 ，设置为0就必须要有内容,最大宽度即为盒子没被撑开前的最大宽度*/
        /* max-width: 200px; */
    }
    .son1 {
        /* 关键:设置文字不换行，当宽度超过父元素的最大宽度时，会强行撑开父盒子 */
        white-space: nowrap;
    }
    .son2 {
        /* 不设置宽度或者设置为100%，跟随父元素的宽度变化，而父元素此时 */
        /* 长段文字显示两行，超出部分隐藏，并展示省略号,可以不添加 */
        overflow:hidden;
        word-wrap: break-word;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
    }
</style>
</html>

给父元素设置个max-width,不然父元素会被最长的子元素撑开，然后给最短的文字设置white-space: nowrap;(关键) 这样会强行撑开父元素，达到控制父元素宽度的效果，而下面的较长文字的宽度也会跟随父元素的宽度变化。