之前有可能展示一些东西吗?当溢出被隐藏?或者我们可以指定一边隐藏溢出?对于前:
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 {
overflow: hidden;
}
<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>
如果你声明一个元素有overflow: hidden
它将适用于所有内容,包括before
和after
元素。无法禁用特定子项的隐藏值。
考虑将内容包装在具有其父级的最大宽度和高度的div中,并在该div上设置oveflow: hidden
。根元素的before
和after
伪元素将存在于包装器之外,因此不会受到影响。
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 > .wrapper {
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>