overflow(超出部分省略号)
溢出:
overflow:visible/hidden/scroll/auto/inherit;
visible:默认值、不剪切。
hidden:超出部分剪切、没有滚动条。
scroll:超出部分有滚动条。
auto:自适应,有滚动条。
inherit:继承父元素的overflow得值。
空余空间:
white-space:pre/pre-wrap/nowrap/pre-line/inherit;
pre:识别回车和空格、不换行。
pre-wrap:识别回车和空格、换行。
nowrap:不识别回车和空格、不换行。
pre-line:识别回车、不识别空格、识别换行。
inherit:继承父元素的white-space属性。
实例:
(1)单行实现省略号:
width:valve;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipse;
(2)
可以不要设置高 自适应 别忘了overflow:hidden;
.box{
width: 100%;
// height: .70rem;
// line-height: .36rem;
margin: .2rem 0 .4rem;
font-size: .28rem;
overflow: hidden;
}
//超出部分隐藏(可设置多行之后省略号)
//两行超出隐藏
.overhide {
display: -webkit-box !important;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
//一行超出隐藏
.overhideline1 {
display: -webkit-box !important;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
overflow(超出部分省略号)的更多相关文章
- 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行 折 ...
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- react实现多行文本超出加省略号
http://www.css88.com/archives/5206 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; ...
- 文本超出显示省略号CSS
单行超出显示省略号 display: block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行超出显示省略号 1.普 ...
- CSS自己主动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...
- Html table 内容超出显示省略号
内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...
- CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...
- CSS自动换行、强制不换行、强制断行、超出显示省略号
转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
随机推荐
- 链式链表的C风格实现
头文件: #ifndef _LINKLIST_H_ #define _LINKLIST_H_ typedef void LinkList; //将数据的类型分离,相当于句柄 //只是一个小节点 包含着 ...
- UVa 10534 DP LIS Wavio Sequence
两边算一下LIS就出来了,因为数据比较大,所以需要二分优化一下. #include <iostream> #include <cstdio> #include <cstr ...
- Arthas诊断工具使用资料
1.https://github.com/alibaba/arthas/issues/327 2.https://alibaba.github.io/arthas/jad.html 3.https:/ ...
- iOS 开发之多线程之GCD
1.GCD(Grand Centrol Dispath) 并行:宏观以及微观都是两个人再拿着两把铁锹在挖坑,一小时挖两个大坑 并发:宏观上是感觉他们都在挖坑,微观是他们是在使用一把铁锹挖坑,一小时后他 ...
- asp.net下js调用session
大致方法为:js调用webservise,然后通过webservise将session值返回给js完成调用 其实最主要的一点就是在webmethod中允许session:[WebMethod(Enab ...
- undertow的PUT参数获取问题
今天使用undertow遇到一个问题,记录一下: 首先,maven配置如下: <dependency> <groupId>org.springframework.boot< ...
- PHP 接入支付宝即时到账功能
首先请到支付宝那边申请一个及时到账的接口账户,需要提交相关材料申请.然后根据即时到账的API文档进行接入.API文档提供了各种语言版本的demo,我这里是下的php版demo,然后再进行相关修改操作. ...
- 学习笔记5——wp主题开发
我觉得学习wordpress插件开发之前还是得先理解一下wp的主题开发,循序渐进才能学好wordpress开发,话不多说,接下来整理一下这两天学习的wordpress主题开发的一些心得和体会,与大家一 ...
- [uiautomator篇] bluetooth---接口来做
package com.softwinner.performance.frameratetest; import android.Manifest; import android.bluetooth. ...
- hdu 1527 威佐夫博弈
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...