如何用CSS将两行文本改为一行？解决Tasty Burger布局问题

当前页面里的“Tasty Burger”文本被挤成两行，要改成一行展示，核心问题是承载该文本的容器宽度不足，导致文本自动换行。你之前调整flex布局的整体属性没切中要点，试试下面两种方案：

方案1：强制文本不换行 #

直接给<h2>添加禁止换行的样式，确保文本始终在一行显示：

.footer-container {
    margin: 25px 0;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-evenly;
}

.footer-item {
    text-align: center;
    font-size: 1.25rem;
}

/* 新增样式：禁止h2换行 */
.footer-item h2 {
    white-space: nowrap;
    margin: 0.5rem 0; /* 可选：调整和logo的间距 */
}

方案2：给左侧容器设置最小宽度 #

给包含logo和标题的第一个.footer-item设置最小宽度，避免flex布局压缩它的空间：

.footer-container {
    margin: 25px 0;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-evenly;
}

.footer-item {
    text-align: center;
    font-size: 1.25rem;
}

/* 新增样式：给左侧footer-item设置最小宽度 */
.footer-container .footer-item:first-child {
    min-width: 180px; /* 根据实际logo和文本宽度调整 */
    flex-shrink: 0; /* 禁止容器被压缩 */
}

当前效果： #

目标效果： #

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