网站备案ip地址段,做网站主流技术,聚财的公司名字大全,公司文化形象设计公司省略是非常常见的功能。
简单的实现省略号
下面的代码就可以实现省略号#xff0c;超过宽度的时候就会出现省略号 .text-name{//宽高是一定要设置的不然是会无效延伸的width: 200rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}稍微复杂点的情况#…省略是非常常见的功能。
简单的实现省略号
下面的代码就可以实现省略号超过宽度的时候就会出现省略号 .text-name{//宽高是一定要设置的不然是会无效延伸的width: 200rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}稍微复杂点的情况动态显示省略号
如果省略号的右边还有内容因为宽度是固定的就会出现中间有空白的情况而且时大时小。这时候把宽度设置到父容器上并且设置子组件display: inline-block;就可以实现动态显示省略号的功能。 .text-account {width: 380rpx;.text-name{//宽高是一定要设置的不然是会无效延伸的display: inline-block;//width: 200rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}
