文本中溢出的文字在结尾显示为三个点

如果文字太长,想把溢出的文字显示为三个点,就可以参考以下

基本语法:text-overflow : clip | ellipsis
若为text-overflow:clip  取默认值,不显示省略标记(...),而是简单的裁切
若为text-overflow:ellipsis  当对象内文本溢出时显示省略标记(...)  

设置好宽度,(今天改的bugj就是因为没设置宽度,在网上查了一下才知道的)

然后使用

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

例如:

div{

70px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

附:  overflow: hidden;

     text-overflow:ellipsis;

     white-space:nowrap;这三句一定要一起用,并且给要控制的元素设置了宽度才会有效果,

如果少了overflow: hidden;文字会横向撑到容易的外面

如果少了white-space:nowrap;文字会把容器的高度往下撑;即使你定义了高度,省略号也不会出现,多余的文字会被裁切掉

如果少了text-overflow:ellipsis;多余的文字会被裁切掉,就相当于你这样定义text-overflow:clip.

点个赞吧
原文地址:https://www.cnblogs.com/maleijiejie/p/14375753.html