css设置当字数超过限制后以省略号(…)显示

css设置当字数超过限制后以省略号(…)显示

大家好,又见面了,我是全栈君。

  1. 文字超出一行,省略超出部分,显示’…’
    用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

     

  2. 多行文本溢出显示省略号

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    注:

            ①-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

            ②display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

            ③-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 

 

转载于:https://my.oschina.net/webcaorui/blog/1560376

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108064.html原文链接:https://javaforall.net

(2)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • html左侧浮动广告代码,jQuery 浮动广告实现代码[通俗易懂]

    html左侧浮动广告代码,jQuery 浮动广告实现代码[通俗易懂]实现方法:浮动广告#qqonline{background-color:red;border:1pxsolid#fcc;position:absolute;top:100px;left:16px;width:100px;height:120px;}#qqonline1{background-color:red;border:1pxsolid#fcc;position:absolute;…

    2026年1月31日
    3
  • JMeter100个线程竟然只模拟出1个并发

    JMeter100个线程竟然只模拟出1个并发

    2020年11月20日
    190
  • 关于我转生变成史莱姆这档事_kicker.de

    关于我转生变成史莱姆这档事_kicker.de1  请问什么所kworker进程 清理旧版本的软件缓存:  sudoapt-getautoclean这个进程是干什么的? 我的机器刚装11.04没次卡的时候top一下就发现kworker这个进程占用CPU很大,基本上都能到75%左右youmaytrytodisableallpowersavingcon

    2022年9月25日
    5
  • Ubuntu20.04环境下安装pip过程遇到问题总结「建议收藏」

    Ubuntu20.04环境下安装pip过程遇到问题总结「建议收藏」今天新装了Ubuntu环境,需要开发Python的代码,需要装一些环境,在安装过程中pip的安装总是出现问题,尝试了很多的方法才成功,下面把我遇到的问题做一下总结:Ubuntu环境如下:下载包的路径在文章末尾问题1:无法定位软件问题:解决办法:修改Ubuntu的软件源就能解决无法定位软件包的问题问题2:安装setuptools报错问题解决办法:执行命令:sudo apt-get install python3-distutils结果如下:正在读取软件包列表… 完成正在分析软件包的

    2022年8月11日
    7
  • 小米手机解BL锁教程

    小米手机解BL锁教程1.找到设置,找到我的设备2.点击全部参数,点miui版本,点3下。3.返回,找到更多设置4.找到开发者选项5.找到设备定状态6.绑定账号和设备,关机,按开键加音量减,进去fast模式,链接电脑。7. 电脑打开下载解锁工具:点击链接下载将解锁工具解压缩,点击unlock.exe。7.解锁工具里登入可解锁的小米账号,同时将手机进入fastboot模式(关机状态下长按音量下键和电源键),用数据线连接电脑,提示已连接手机即可,若没有驱动点击图标安装即可。8.设备已解锁-解锁成功

    2022年6月12日
    58
  • Python:利用python代码编程实现将视频的avi格式转换为MP4格式

    Python:利用python代码编程实现将视频的avi格式转换为MP4格式​Python:利用python代码编程实现将视频的avi格式转换为MP4格式目录利用python代码编程实现将视频的avi格式转换为MP4格式T1、ffmpeg命令在dos内实现T2、python代码编程实现利用python代码编程实现将视频的avi格式转换为MP4格式T1、ffmpeg命令在dos内实现ffmpeg-y-iF:\File_Anaconda\project_py37\RealTimeImageAnimation\output\FamilyBa_HuGe.a

    2022年10月17日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号