CSS中的点点点是一种很常见的技巧,用来表示文本内容的截断。一般情况下,我们可以使用text-overflow: ellipsis;来实现这一效果。具体来说,当一行文本溢出父容器时,就会显示省略号。
.text { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
这里,我们先将父容器的宽度设置为200px,这个宽度可以根据实际情况进行调整;然后,我们使用white-space: nowrap;来防止文字换行;最后,我们使用overflow: hidden;来隐藏超出父容器的文本。
当然,在某些情况下,我们可能需要对省略号的样式进行自定义。比如,我们可以通过设置:before和:after来添加前、后缀。
.text-custom { position: relative; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-custom:before { content: '...'; position: absolute; left: 0; } .text-custom:after { content: ''; position: absolute; right: 0; width: 20px; height: 20px; background-color: #fff; }
在这个例子中,我们首先设置了position: relative;来让:before和:after相对于父容器进行定位。然后,我们在:before中添加了省略号'...',并将其定位到了父容器的左侧;在:after中添加了一个空元素,并将其定位到了父容器的右侧。这里,我们同时设置了一个宽度和高度,并将背景颜色设置为#fff,来隐藏省略号的部分。
以上就是CSS中使用点点点的基本技巧和自定义方法。希望对大家有所帮助。