前端盒模型的概念和文本溢出解决办法

前端开发中盒模型是所有元素的基础，如果弄不懂盒模型的概念就很难开发出好的页面，下面小千就来给大家介绍一下盒模型和解决前端文本溢出的代码。

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

PADDING的用法及值含义

MARGIN的用法及值含义

盒模型的大小计算方式

文本溢出

1.overflow

  visible:默认值，内容不会被修剪，会呈现在元素框之外；hidden：内容会被修剪，并且其余内容是不可见的；scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;inherit：规定应该从父元素继承overflow属性的值。

2.white-space

  normal：默认值，多余空白会被浏览器忽略只保留一个；pre：空白会被浏览器保留；pre-wrap：保留一部分空白符序列，但是正常的进行换行；pre-line:合并空白符序列，但是保留换行符；nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;

3.text-overflow

  clip：不显示省略号（...），而是简单的裁切;ellipsis：当对象内文本溢出时，显示省略标记；

4.文本溢出变省略号设置

  text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：1）、容器宽度：width：value；（px、%，都可以）2）、强制文本在一行内显示:white-space：nowrap;3）、溢出内容为隐藏：overflow：hidden；4）、溢出文本显示省略号：text-overflow：ellipsis;注：必须是单行文本才能设置本文溢出！！！

本文来自千锋教育，转载请注明出处

前端盒模型的概念和文本溢出解决办法相关推荐

前端技术分享：盒模型的概念和文本溢出解决办法
前端开发中盒模型是所有元素的基础,如果弄不懂盒模型的概念就很难开发出好的页面,下面小千就来给大家介绍一下盒模型和解决前端文本溢出的代码. 盒模型盒模型是css布局的基石,它规定了网页元素如何显示以及 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
java页面数值转文本_Java读取Excel表格以及读取数字列转为文本的解决办法
Java读取Excel表格代码和把数字列转为文本的解决办法. 所需 jar 包:dom4j-1.6.1.jar ,poi-3.8-20120326.jar,poi-ooxml-3.8-20120326 ...
【深度学习】模型过拟合的原因以及解决办法
[深度学习]模型过拟合的原因以及解决办法 1.背景 2.模型拟合 3.简述原因 4.欠拟合解决办法 5.过拟合解决办法 1.背景所谓模型过拟合现象: 在训练网络模型的时候,会发现模型在训练集上表现很 ...
OpenFOAM修改湍流模型之后出现#duplicate entry的解决办法
OpenFOAM修改湍流模型之后出现#duplicate entry的解决办法参考文章: OpenFOAM-Duplicate Entry 解决办法:link 如何在OF6中添加新的湍流模型? :l ...
Java读取Excel表格以及读取数字列转为文本的解决办法
Java读取Excel表格代码和把数字列转为文本的解决办法. 所需 jar 包:dom4j-1.6.1.jar ,poi-3.8-20120326.jar,poi-ooxml-3.8-20120326 ...
复制Typora的文本到CSDN文章编辑页保留格式，解决格式消失只剩纯文本的解决办法【超详细】
问题描述很多时候,我们在Typora写好的文章,当我们复制到CSDN的文章编辑页时,字体格式都消失了,只剩下纯文本了. 解决办法选中想要复制的文本 -> 编辑 -> 复制为 ...
Tomcat内存溢出解决办法
工作中,Tomcat内存溢出遇到两次了,就在网上找了些资料,将解决办法分享一下: 使用Java程序从数据库中查询大量的数据时出现异常: java.lang.OutOfMemoryError: Ja ...
java 大数据处理之内存溢出解决办法（一）
http://www.cnblogs.com/a757956132/p/4644910.html http://my.oschina.net/songhongxu/blog/209951 一.内存溢出 ...

前端盒模型的概念和文本溢出解决办法

盒模型

前端盒模型的概念和文本溢出解决办法相关推荐

最新文章

热门文章