如何消除工具条中居中换行p标签的左右多余间距？

问题描述 #

我的网站中有一个utility bar，内部包含两个消息文本——一个居左、一个居右，两侧文本均会换行且居中对齐。目前存在两个问题：

• 左侧消息的左边缘无法与父容器左边缘对齐
• 文本居中时p标签左右出现多余间距，无法收缩至内部文本的宽度

原代码 #

CSS #

* {
  box-sizing: border-box;
}

.utility-bar {
    padding-left: 64px;
    padding-right: 64px;
    width: 100%;
    background-color: yellow;
}

.utility-bar__container {
    display: flex;
    justify-content: initial;
    padding: 0;
    justify-content: space-between;
}

.utility-bar p {
    margin: 0;
    text-align: center;
    max-width: 200px;
}

HTML #

<div class="utility-bar">  
    <div class="utility-bar__container">
        <p>Text message to show what happens if text wraps</p>

        <p>Text message to show what happens if text wraps</p>
      </div>
    </div>  
</div>

解决方案 #

修改CSS，为p标签添加width: fit-content属性，同时清理重复的justify-content设置：

修改后的CSS #

* {
  box-sizing: border-box;
}

.utility-bar {
    padding-left: 64px;
    padding-right: 64px;
    width: 100%;
    background-color: yellow;
}

.utility-bar__container {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.utility-bar p {
    margin: 0;
    text-align: center;
    max-width: 200px;
    width: fit-content; /* 关键：让p宽度适配内容，受max-width限制 */
}

说明 #

1. width: fit-content 让p标签宽度自动适配文本内容，当文本长度超过200px时，会触发换行并保持最大宽度200px
2. flex容器的justify-content: space-between 会自动让左侧p对齐容器左边缘、右侧p对齐容器右边缘
3. text-align: center 确保p内部的换行文本保持居中对齐

内容的提问来源于stack exchange，提问作者martini_dog