未做隐藏处理

执行结果：

1、1行超出部分省略号

效果：

2、多行超出部分隐藏（目前只能在chrome浏览器中使用，其他浏览器不兼容）

　　

效果：

-webkit-line-clamp 属性定义显示行数可以随需求改变

目前开发的使用方式是：

限制文字盒子高度为文字  line-height  大小的倍数，至于其他显示字数由后端限制

效果：

　　

css 文字超出部分隐藏的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  3. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  4. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  5. css文字超出一行用点表示

    1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

  6. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

  9. css 文字超出变 ... 点点点

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

随机推荐

  1. JavaScript的注意事项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于502 bad gateway报错的解决办法

  3. LintCode_488 快乐数

    题目 写一个算法来判断一个数是不是"快乐数". 一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是无 ...

  4. oracle触发器级联删除

    create or replace trigger delete_trigger1 after delete on contracting_party for each row begin if de ...

  5. python-None

    今天偶然间,有人问了一个问题,项目中出现了一个这样的错误. 看到后,就想到是前后数据类型不一致.当时他定义了一些默认初始值为None(刚接触python代码,之前是c,java),然后就后边出现了这样 ...

  6. 关于chrome浏览器的帐号密码自动填充以及出现的黄色背景色填充问题

    不知道大家平时做项目的时候有木有关注这个问题,其实之前做项目遇到过类似的问题,但是因为是单独的chrome浏览器的填充,而且是样式问题稍微严重点,也就没在意.然而在近期的项目中有遇到了这个问题,最为一 ...

  7. vue使用flexible和px2rem实现移动端适配

    首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修 ...

  8. 2019-1-17-一段能让-VisualStudio-炸掉的代码

    title author date CreateTime categories 一段能让 VisualStudio 炸掉的代码 lindexi 2019-01-17 09:55:29 +0800 20 ...

  9. MaxCompute 构建企业云数据仓库CDW的最佳实践建议

    在本文中阿里云资深产品专家云郎分享了基于阿里云 MaxCompute 构建企业云数据仓库CDW的最佳实践建议. 本文内容根据演讲视频以及PPT整理而成. 大家下午好,我是云郎,之前在甲骨文做企业架构师 ...

  10. HTML-DOM实例——实现带样式的表单验证

        HTML样式 基于table标签来实现页面结构 <form id="form1"> <h2>增加管理员</h2> <table&g ...