文本溢出后,隐藏显示"..."和margin边距重叠
一。隐藏加省略
单行文本:
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
多行文本:
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2; //是几行就填几
二。边距重叠
如果有两个div
<div class="d1"></div>
<div class="d2"></div>
1.d1:margin-bottom:20px;
d2:margin-top:30px; //d1和d2的边距为30px,取最大值
1.d1:margin-bottom:-20px;
d2:margin-top:-30px; //d1和d2的边距为-30px,取最小值
1.d1:margin-bottom:-20px;
d2:margin-top:30px; //d1和d2的边距为10px,取间距之和
如果是父子关系
<div class="w1">
<div class="d1"></div>
</div>
<div class="w2">
<div class="d2"></div>
</div>
1.di: margin-bottom:50px;
w1:padding-bottom:0px; //可以视为d1的margin-bottom发生了穿透,等效为 w1 的margin-bottom:50px;
2.di:margin-bottom:50px;
w1:padding-bottom>0,例如: padding-bottom:1px; //等效为w1: padding-bottom:51px;,在box-sizing:content-box与border-box测试一致
文本溢出后,隐藏显示"..."和margin边距重叠的更多相关文章
- padding和margin——内边距和外边距
一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...
- text-overflow文本溢出隐藏“...”显示
一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...
- HTML(多行)文本超过部分隐藏,末尾显示(...)
HTML(多行)文本超过部分隐藏,末尾显示(...) <!DOCTYPE html> <html> <head> <meta charset="ut ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...
- 如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
随机推荐
- Spring全家桶——SpringBoot之AOP详解
Spring全家桶--SpringBoot之AOP详解 面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP). OOP中模块化的关键单元是类,而在AOP中,模块化单元是方 ...
- Kubernetes实战 - 从零开始搭建微服务 - 1.5 提高可用性-发布多节点的Node/Express网络应用程序
1.5 提高可用性-发布多节点的Node/Express网络应用程序 Kubernetes实战 - 从零开始搭建微服务 前言 在上一篇文章中,已经学习了如何简单地开发一个单层网络应用.[Kuberne ...
- 8分钟为你详解React、Angular、Vue三大前端技术
[引言] 当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题.本文就对于当下主流的前端开发技术React.Vue.Angular这三个框架做个相对详尽的探究,目的是为了 ...
- Java IO(十七)FIleReader 和 FileWriter
Java IO(十七)FIleReader 和 FileWriter 一.介绍 FIleReader 和 FileWriter 是读写字符文件的便利类,分别继承于 InputStreamReader ...
- centos7 在docker下安装mongodb
第一步:安装 1.1 查找(查看)mongo相应的版本 [root@localhost ~]# docker search mongo INDEX NAME DESCRIPTION STARS OFF ...
- Rocket - debug - TLDebugModuleInner - DMI Register Control and Status
https://mp.weixin.qq.com/s/tI41wu0xaIQ5PRq6F82tNw 简单介绍TLDebugModuleInner中生成DMI控制和状态寄存器使用到的状态. 1. abs ...
- C#中值类型,引用类型,字符串类型的区别(内存图解)
如果用图片来解释值类型,引用类型和字符串类型(引用类型的一种)的区别的话 值类型: 引用类型: string类型:
- Linux (七)权限控制
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 1. 概述 Linux需要对登录用户读写执行文件.进入目录.查看增删目录内容等操作进行控制,不能任由用户 ...
- ASP.NET MVC 数据传递 视图向控制器传递
视图向控制器传递 MVC 视图向控制器传递,就是获取用户输入的数据,在去进行操作 好了,我们不多说直接进行我们的案例. 在HomeController类中添加下来方法 [HttpPost] publi ...
- java实现输入信用卡号码
/* 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心, 因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法来验证通过. 该校验的过程: 1.从卡号最后一 ...