html内容溢出部分...
首先标签必须满足不是行内标签
方法一:(单行)此方法没有任何问题
width: 38px;(需要给定宽度)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
方法二:(多行)此方法浏览器兼容有问题,比如IE,火狐不行
width: 38px;(需要给定宽度)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;(行数)
-webkit-box-orient: vertical;
方法三:(多行)after属性 可能在文字对齐上没有之前的优美
容器名{
max-height: 64px;
overflow: hidden;
margin: 5px 0;
word-wrap:break-word;
position: relative;
padding: 0 10px 0 0;
}
容器名:after{
content: "...";
position: absolute;
right: 0;
bottom:0;
}
html内容溢出部分...的更多相关文章
- table表格中的内容溢出布局方式
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...
- css3内容溢出属性
overflow是css2.0的属性,css3中新增了overflow-x和overflow-y属性. overflow-x主要是用来定义对水平方向内容溢出的剪切,而overflow-y主要是用来定义 ...
- [CSS]overflow内容溢出
定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 说明 这个属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有 ...
- 关于client浏览器界面文字内容溢出用省略号表示方法
在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省 ...
- CSS:overflow 内容溢出属性
overflow 属性规定当内容溢出元素框时发生的事情 值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容 ...
- CSS基础 overflow 内容溢出部分显示效果
属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条
- 关于css清除浮动,解决内容溢出的问题
以前在布局的时候总会遇到这样的问题,比如我想让整体的内容居中,所以会这样写, .main-content{ width:960px:height:300px;margin:0px auto; } 然后 ...
- css如何实现多行文本时,内容溢出,出现省略号
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- jQuery关于文字内容溢出用点点点(…)省略号表示
1.jQuery限制字符字数的方法代码很简单,使用也很方便,如下: $(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each( ...
随机推荐
- Linux系统下启动tomcat报错【java.util.prefs.BackingStoreException: Couldn't get file lock】的解决方法
Linux环境下,启动tomcat报出如题的警告信息,虽然对系统正常使用没有多大影响,但是会导致tomcat的日志垃圾信息很多,而且看起来很不爽... 具体的警告信息如下: Jan , :: PM j ...
- [2]注解(Annotation)-- 深入理解Java:注解(Annotation)自定义注解入门
转载 http://www.cnblogs.com/peida/archive/2013/04/24/3036689.html 深入理解Java:注解(Annotation)自定义注解入门 要深入学习 ...
- sql 数据类型转换
1.convert(float,endtimepart)——conver(数据类型,字段名称) 2.cast(endtimepart as float)——cast(字段名称 as 数据类型)
- vscode修改code runner插件默认使用的编译器
code runner的原理就是自动帮你完成在控制台中输入切换路径和编译源代码以及运行编译好的程序的指令 编译指令是根据配置文件中一开始写好的模板来执行的 不同语言对应一条指令,运行code runn ...
- 数字序列中某一位数字(《剑指offer》面试题44)
由于这道题目在牛客上没有,所以在此记录一下. 一.题目大意: 数字以0123456789101112131415…的格式序列化到一个字符序列中.在这个序列中,第5位(从0开始计数,即从第0位开始)是5 ...
- 玄学曲线并不玄 教你如何看懂GPU呈现
红色代表了“执行时间”,它指的是Android渲染引擎执行盒子中这些绘制命令的时间,假如当前界面的视图越多,那么红色便会“跳”得越高.实际使用中,比如我们平时刷淘宝App时遇到出现多张缩略图需要加载时 ...
- Osip2和eXosip协议栈的简析
Osip2是一个开放源代码的sip协议栈,是开源代码中不多使用C语言写的协议栈之一,它具有短小简洁的特点,专注于sip底层解析使得它的效率比较高. eXosip是Osip2的一个扩展协议集,它部分封装 ...
- Hadoop概念学习系列之Hadoop、Spark学习路线(很值得推荐)(十八)
不多说,直接上干货! 说在前面的话 此笔,对于仅对于Hadoop和Spark初中学者.高手请忽略! 1 Java基础: 视频方面: 推荐<毕向东JAVA基础视频教程>.学 ...
- 固态硬盘使用简要手册——windows平台
第一步,请安装它. 第二步,请关闭磁盘整理功能,如图 详细:控制面板--管理工具--任务计划程序 打开界面,设置如下 图1 第三步:预读(Superfetch)和快速搜索(Windows Search ...
- [转].NET Framework、C#、CLR和Visual Studo之间的版本关系
原文地址:http://www.xcode.me/more/microsoft-net-framework-version-define C#版本 .NET Framework版本 CLR版本 Vis ...