列表元素內的錨點上的省略號隱藏列表項目符號點
[英]Ellipsis on an anchor inside a list element hides list bullet points
問題描述
我有一個帶有光盤子彈點的列表，當我在元素內部的文本上應用省略號時，它會隱藏項目符號點。
在發現如果我應用overflow: hidden在列表本身之后，它將隱藏項目符號點。 所以我將此規則移動到list元素中的錨點上，但由於某種原因它仍然隱藏了父列表元素的光盤。 但是，如果我將一個兄弟元素添加到錨點，它的工作原理..
這里看到的例子： http ： //jsfiddle.net/EByrk/1/
3 個解決方案
解決方案1
3 2014-04-15 01:11:58
將list-style-position:inside應用於List的工作方式是將其保留在溢出內。
但是，我仍然對問題中描述的行為感到困惑。 這是一個錯誤嗎？
解決方案2
0 2014-04-15 01:31:30
作為將子彈定位在inside的替代方案，您可以使用這樣的技巧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {padding-left: 10px;}
li {width: 150px; position: relative;}
li a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
}
li:before {
content:"\2022 ";
padding:0 5px 0 0;
vertical-align:middle;
position: absolute;
left: -15px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">This is a long line of text lorem ipsum dolor</a></li>
<li><a href="#">This is shorter</a></li>
<li><a href="#">This is a long line of text lorem ipsum dolor</a></li>
</ul>
</body>
</html>
解決方案3
0 2015-03-09 18:31:16
將li a的display屬性更改為inline-block將保留項目符號。
li a {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
}
要在錨鏈接中“看起來像”子彈點列表的元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.