zoukankan      html  css  js  c++  java
  • 解决文字溢出和兼容性问题的处理

    之前写网页过程中当文字需要后台调用的时候会遇到很多客户喜欢上传成百上千个字(这个时候网页上就会出现密密麻麻的全是文字)

    当然其实很好解决我们只要在编码过程中养成良好给div或者p标签一个高,然后给一个overflow: hidden;溢出隐藏就好了这个时候就是如图的效果

    但是这样看上去很突兀,这时候我们就需要有更优质的体验的方法,使其结尾加上省略号代码如下

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    备注:第三行代码中你需要显示几行,此处的数字就应该写多少!

    效果如下

    但是此代码在火狐当中是不兼容的(并且溢出隐藏的属性都被覆盖),所以我们得记得在使用此代码的同时一定要给盒子或者标签设置高度,可以适当的解决火狐不兼容的问题(但是还是不会出现省略号)!


    大漠里的那一片绿洲
  • 相关阅读:
    关于自链接的视图的更新
    JavaScript局部变量与全局变量2
    减少IDE中的新建项
    whitespace对select无效
    学习摘录21
    让我记得写文档的设置
    本地连接不见了
    jquery 学习笔记
    jquery用load引入页面
    android笔记
  • 原文地址:https://www.cnblogs.com/zmayan/p/10483942.html
Copyright © 2011-2022 走看看