未做隐藏处理

执行结果：

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. 2019-3-1-WPF-从零开始开发-dotnet-Remoting-程序

    title author date CreateTime categories WPF 从零开始开发 dotnet Remoting 程序 lindexi 2019-03-01 09:30:45 +0 ...

  2. win10 ubuntu 双系统启动顺序设置

    之前安装ubuntu的时候就遇到过这个问题, 当时解决了,设置成开始可以选择启动ubuntu系统还是win系统. 但是过了好久后又忘记了,最近win10开了一次安全模式启动后,一开机就是win10,u ...

  3. 全面解析vue-cli生成的项目中使用其他库（js库、css库）

    前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用.但是个人建议最好不要用了,用人家vue提供的不好嘛. 一.用vue-cli生成项目 1. v ...

  4. Vue--过渡动画实现的三种方式

    一.使用vue的transition标签结合css样式完成动画 <!DOCTYPE html> <html lang="en"> <head> ...

  5. web前端学习（三）css学习笔记部分（6）-- 选择器详解

    9.选择器详解 9.1  属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...

  6. php thrift TServerSocket实现端口复用

    <?php namespace Message\Controller; use Think\Controller; use Thrift\Exception\TException; use Th ...

  7. 2018-12-25-Roslyn-如何使用-MSBuild-Copy-复制文件

    title author date CreateTime categories Roslyn 如何使用 MSBuild Copy 复制文件 lindexi 2018-12-25 9:35:8 +080 ...

  8. PHP基础-生成静态html页面原理是怎样

    设置example.html为模板文件,然后按照此模板文件生成article-1.html~article-5.html,以此来做简单的演示,代码如下: <?php//将数据存入二维数组$con ...

  9. poj2449第K短路问题（A*算法）

    启发函数:f(x)=g(x)+h(x); g(x)表示初始点到x状态的代价,h(x)表示从x的状态到目标状态的代价的估计值(并不是真实的),实际最小代价<=h(x); 起点s,终点t,x.v=s ...

  10. iOS尽量不要在viewWillDisappear:方法中移除通知

    http://www.cocoachina.com/ios/20151214/14596.html 在了解控制器的生命周期之后,我们都知道viewWillAppear:方法是在控制器的view将要显示 ...