页面缩放时React-Bootstrap页脚内容消失的优化需求

要实现类似Google Earth页脚的文本自动截断效果，只需通过CSS调整文本溢出规则，同时优化容器布局即可。以下是修改后的完整代码：

修改后的JSX代码 #

<Container fluid className='container-footer'>
    <Row className="align-items-center">
        <Col md={6} className="footer-left">Loading</Col>
        <Col md={6}>
            <div className="footer-controller">
                <a href="https://leafletjs.com" title="A JavaScript library for interactive maps" style={{color:'#fff'}}>
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8">
                        <path fill="#4C7BE1" d="M0 0h12v4H0z"></path>
                        <path fill="#FFD500" d="M0 4h12v3H0z"></path>
                        <path fill="#E0BC00" d="M0 7h12v1H0z"></path>
                    </svg> Leaflet
                </a>
                <span aria-hidden="true">|</span>
                <span className="footer-text">Welcome to the React-Bootstrap world</span>
            </div>
        </Col>
    </Row>
</Container>

修改后的CSS代码 #

.container-footer {
  position: absolute;
  height: 19px;
  font-size: 13px;
  font-weight: 100;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: #fff !important;
  padding: 0 1rem; /* 避免内容贴边 */
}

.footer-controller {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 控制元素间距 */
  justify-content: flex-end;
  overflow: hidden;
  white-space: nowrap;
}

.footer-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1; /* 允许文本容器收缩 */
  min-width: 0; /* 关键：让容器能收缩到小于内容宽度 */
}

.footer-left {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.align-items-center {
  height: 100%; /* 让行和页脚等高，垂直居中内容 */
}

核心修改点说明 #

• 将footer-controller改为flex布局，更精准控制元素排列，同时设置overflow: hidden和white-space: nowrap防止内容换行溢出
• 把需要截断的文本单独封装在footer-text容器中，通过text-overflow: ellipsis实现省略号效果，flex-shrink: 1和min-width: 0确保容器能随父元素宽度自动收缩
• 给左侧列也添加截断规则，避免小屏幕下左侧内容溢出消失
• 添加align-items-center让行内元素垂直居中，避免内容因页脚高度固定而错位

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