Question

我有一个包含光盘项目符号的列表，当我在元素内部的文本上应用省略号时，它会隐藏项目符号点。

在发现如果我在列表本身上应用overflow: hidden之后，它将隐藏项目符号点。所以我将此规则移动到list元素中的锚点上，但由于某种原因它仍然隐藏了父列表元素的光盘。但是，如果我将一个兄弟元素添加到锚点，它可以工作..

Answer 1

将list-style-position:inside应用于列表可以将其保留在溢出内。

但是，我仍然对问题中描述的行为感到困惑。这是一个错误吗？

Answer 2

作为定位子弹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>

Answer 3

将display的{{1}}属性更改为li a将保留子弹。

inline-block

列表元素内的锚点上的省略号隐藏列表项目符号点

3 个答案: