CSS Flex是一種強大的布局技術,可以幫助我們輕松地設計出響應式的網頁布局。而其中一個有用的特性就是Flex中的省略號。在Flex布局中,我們可以使用省略號來打斷文本,避免單行文本超出邊界,影響頁面的美觀。
/* 省略號的CSS樣式 */ .ellipsis { white-space: nowrap;/*強制不換行*/ overflow: hidden;/*超出部分隱藏*/ text-overflow: ellipsis;/*溢出部分用省略號代替*/ }
上述代碼中,我們首先使用white-space屬性將文本強制不換行,然后使用overflow屬性將超出部分隱藏,最后使用text-overflow屬性將溢出部分用省略號代替。
在Flex布局中,我們可以將這個樣式應用于Flex容器、Flex項目或其內部的任何元素。如下所示:
/* 應用于Flex容器 */ .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container >div { width: calc(33.33% - 20px); margin-bottom: 20px; text-align: center; } .container >div >p { height: 60px; line-height: 30px; margin-top: 0; margin-bottom: auto; padding: 10px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 2px 2px rgba(0, 0, 0, .2); font-size: 16px; color: #666; text-align: justify; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
上述代碼中,我們使用了Flex布局,并將樣式應用于Flex容器、Flex項目以及其內部的p標簽。在p標簽中,我們設置了一個固定高度,使用多行文本截斷技術,通過text-overflow讓它在一定長度后顯示省略號。
通過使用Flex布局中的省略號技術,我們可以輕松實現單行或多行文本的截斷,避免了文本溢出影響頁面美觀的問題。