CSS：剪切時刪除整個元素

我有一個無序列表中的項目列表中的一個div隱藏溢出。列表中的項目由包含文本內容和邊框的框表示。它可以是一個很長的有用但不重要的信息列表，如果在較小的設備上使用，可以隱藏這些信息。CSS：剪切時刪除整個元素

如果列表中的某些項溢出，我想將整個項目設置爲隱藏溢出，而不僅僅是其中的一部分。

當前列表可以像這樣修剪時：

--------- 
| A | 
|  | 
--------- 

--------- 
| B |

由於B溢出只顯示了一半。如果發生這種情況，我只想顯示A.

該項目不必在無序列表中，可以在任何。有沒有辦法做到這一點只有HTML和CSS？

我能夠在jQuery中做到這一點，但我只是想知道是否有一種CSS方式來做到這一點。

來源

2012-03-06 user1245172

我不認爲你可以做到這一點的CSS ... – Andre 2012-03-06 20:25:42

我不認爲有一個簡單的解決方案，僅使用HTML和CSS這個問題。我能想到做到這一點的唯一方法是確保列表中的每個項目與包含溢出的包含div的高度相同：隱藏屬性。 – 2012-03-06 20:31:23

在顯示溢流盒和清單項目的高度之前，你知道什麼嗎？或者一切都完全隨機？ – ScottS 2012-03-06 21:19:34

它可能與「Flex」屬性。請參閱：http://jsfiddle.net/dsmzz4ks/

在小提琴中，使窗口顯示寬度變小。你會看到任何不適合的列表項目被完全刪除，直到窗口再次變大。

這是有點hokey因爲它使用li:before條款添加子彈，但它仍然工作。

CSS：

.box { 
    width: 30%; 
    float: left; 
    margin: 8px 16px 8px 0; 
    position: relative; 
    border: 1px solid black; 
    padding: 15px; 
} 

ul { 
    height: 90px; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    overflow: hidden; 
    padding-left: 15px; 
    justify-content: space-around; 
    margin: 0; 
} 

li { 
    display: block; 
    width: 100%; 
    padding-left: 10px; 
    position: relative; 
} 

li:before { 
    content: '\2022'; 
    position: absolute; 
    left: -5px; 
}

來源

2015-08-19 22:26:10 AlbatrossCafe

非常有幫助！這應該被標記爲答案 – lopata 2016-04-22 23:51:29

CSS：剪切時刪除整個元素

回答

相關問題