当文本内容超出容器宽度时,可以使用CSS中的text-overflow
属性来实现文字溢出显示小点点的效果。下面是一种常见的使用方法:
html
<style>
div {
width: 200px;
height: 18px;
font-size: 16px;
white-space: nowrap; /* 设置文本不换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 文字溢出显示省略号 */
}
</style>
效果如下: