列表元素内的锚点上的省略号隐藏列表项目符号点
[英]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.