在網(wǎng)頁設計中，常常需要設置一個Banner來展示網(wǎng)站名稱、宣傳語或特別活動等，但是有時候Banner會出現(xiàn)滾動或跑動的情況，這會影響網(wǎng)站整體的美觀性和用戶體驗。下面，我們來介紹如何通過CSS不讓Banner跑。

.banner {
width: 100%;
max-width: 1200px; /*容器最大寬度*/
margin: 0 auto; /*水平居中*/
position: relative;
overflow: hidden; /*超出容器的部分隱藏*/
}
.banner img {
width: 100%;
height: auto;
vertical-align: top;
display: block; /*去除圖片默認間距*/
}
.banner .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
/*以下為文字超出容器部分隱藏*/
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

以上代碼中，我們首先設置了一個Banner容器，通過設置容器的最大寬度和居中等樣式，將Banner元素放置在網(wǎng)頁中心位置。然后，我們將圖片元素設置為100%寬度，并且去除圖片默認間距。接著，我們設置了Banner文字的位置樣式，并且通過white-space、text-overflow和overflow屬性將文字超出容器部分隱藏起來。

通過以上CSS樣式設置，我們就可以防止Banner出現(xiàn)跑動的情況，同時也可以提升網(wǎng)站的美觀度和用戶體驗。