文本裁剪:overflow内容溢出时显示省略号

来源:互联网 发布:神州融大数据 编辑:程序博客网 时间:2024/06/07 03:53
<div>    fhuehkfuebskaufejsnkufehsjnfusenfkejnfsenfseenfu</div>

1、首先该容器必须有个宽度。
width:200px; height:200px;

2、规定段落中的文本不进行换行。
white-space:nowrap;

3、多余的内容需要裁剪掉,不可见的。
overflow:hidden;

4、显示省略号,代表被裁剪的内容。
text-overflow:ellipsis;

即:
div {
width:200px;
height:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

ps: 鼠标悬停在该元素,显示整个文本。
div:hover {
text-overflow: inherit;
overflow: visible;
}

0 0
原创粉丝点击