如果文字太长,想把溢出的文字显示为三个点,就可以参考以下
基本语法:text-overflow : clip | ellipsis 若为text-overflow:clip 取默认值,不显示省略标记(...),而是简单的裁切 若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...)设置好宽度,
然后使用
overflow:hidden;
text-align:ellipsis;
white-space:nowrap;
例如:
div{
width:70px;
overflow:hidden;
text-align:ellipsis;
white-space:nowrap;
}
附: overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;这三句一定要一起用,并且给要控制的元素设置了宽度才会有效果,
如果少了overflow: hidden;文字会横向撑到容易的外面
如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉
如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.