博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现限制显示的字数,超出显示"..."
阅读量:6260 次
发布时间:2019-06-22

本文共 472 字,大约阅读时间需要 1 分钟。

一、背景

  在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果。

二、实现步骤

  CSS代码

.ov{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用。

测试代码

1  2  3      4     
5 测试超出显示点点点 6 15 16 17
18 测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点19
20 21

显示效果如下:

转载地址:http://fwhsa.baihongyu.com/

你可能感兴趣的文章
Scikit中的特征选择,XGboost进行回归预测,模型优化的实战
查看>>
Sklearn入门介绍
查看>>
Android广告图片轮播,支持无限循环和设置轮播样式、切换时间等
查看>>
screenX/Y,clientX/Y,offsetX/Y和pageX/Y之间有什么区别?
查看>>
webpack4.0优化那些事儿
查看>>
数据结构与算法(位运算) --javascript语言描述
查看>>
数据结构与算法(回溯法) --javascript语言描述
查看>>
百度地图开发实例番外篇--实用方法(持续更新)
查看>>
“大数据应用场景”之隔壁老王(连载一)
查看>>
k均值聚类算法(k-means)
查看>>
修改springboot的端口来启动项目
查看>>
MaxCompute SQL原理解析及性能调优
查看>>
vue中慎用style的scoped属性
查看>>
深度学习在股票市场的应用
查看>>
redis源码分析之事务Transaction(下)
查看>>
【273天】我爱刷题系列(32)
查看>>
Hystrix基础入门和特性讲解
查看>>
webpack-dev-server模块
查看>>
解决brew默认安装iamgemagick7导致wand库运行错误问题
查看>>
进入页面跳转到指定锚点
查看>>