CSS 段落/换行/缩进
CSS 段落/换行/缩进
1.盒模型
box-sizing: content-box|border-box|inherit; content-box(默认) :
实际宽度/高度 = width/height(元素内容大小) + padding + border
border-box:
width/height = 元素内容大小 + padding + border
实际宽度/高度 = width/height = margin
2.滚动条
visible 默认值。内容不会被修剪,会呈现在元素框之外。 - 溢出部分仍然显示在盒子模型外。
hidden 内容会被修剪,并且其余内容是不可见的。 - 溢出部分不显示
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。- 始终显示
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(推荐:该显示才显示)
inherit 规定应该从父元素继承 overflow 属性的值。
3.换行
1.<br />
2.<p>标签来实现换行
3.CSS设置宽度自动换行:对于连续的数字和英文则无效。
4.连续英文字母及数字换行使用CSS换行。使用word-wrap:break-word与word-break:break-all
word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,
word-wrap:break-word:会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;
word-break:break-all:则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了
ps:CSS3中将word-wrap改名为overflow-wrap;
4.不换行
white-space:nowrap; 所有内容都强制在同一行中显示。(遇到<br>除外)
normal 默认。空白和换行字符串会被浏览器忽略。
pre 保留空格和换行,容器边界不自动换行。和HTML标签<pre>类似- 保留原字符串样子。
pre-wrap 保留空格和换行,容器边界自动换行。
pre-line 与pre-wrap区别:多个空格合并成一个空格(注意:行首不保留空格)
注意:不管什么值,<br>都会换行。
CSS 段落/换行/缩进的更多相关文章
- css换行缩进
1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...
- 精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
- HTML段落,换行,字符实体
HTML段落,换行,字符实体 html段落 <p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开,代码如下: <!DOCTYPE html> & ...
- CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
- css文本超出部分省略号&CSS强制换行总结
word-break:break-all单词截断自动换行 word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congra ...
- css文本换行相关属性及解释
本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...
- css 之 文本缩进属性(text-indent)
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 文本缩进属性(text-indent) 这个属性设定文本 ...
- CSS 不换行 white-space 属性详解
实例 规定段落中的文本不进行换行: p { white-space: nowrap } 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTM ...
- CSS——段落处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Django学习路2
1.导入 Django 工程时 在 manage.py 上一级目录导入 2.Add local 本地 Add Remote 远端 3.BASE_DIR 项目所在目录的绝对路径 4.SECRET_KEY ...
- 对于AES和RSA的个人理解
最近学习爬虫 遇到一些加密的坑 然后了解到了AES和RSA 记录一下 AES 1.什么是AES AES是一种对称的加密算法,运行要求低,不需要计算机有非常高的处理能力和大的内存, 加密速度很快: 对 ...
- PHP gmmktime() 函数
------------恢复内容开始------------ 实例 返回 GMT 日期的 UNIX 时间戳,然后使用它来查找该日期的天: <?php// Prints: October 3, 1 ...
- PHP getNamespaces() 函数
实例 返回 XML 文档中使用的命名空间: <?php$xml=<<<XML高佣联盟 www.cgewang.com<?xml version="1.0&quo ...
- 2020牛客暑期多校训练营 第二场 B Boundary 计算几何 圆 已知三点求圆心
LINK:Boundary 计算几何确实是弱项 因为好多东西都不太会求 没有到很精通的地步. 做法很多,先说官方题解 其实就是枚举一个点 P 然后可以发现 再枚举一个点 然后再判断有多少个点在圆上显然 ...
- java -jar .jar中没有主清单属性
pom里加上 <build> <plugins> <plugin> <groupId>org.springframework.boot</grou ...
- Vue通过Blob对象实现导出Excel功能
不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Exc ...
- 删除数据-大表根据rowid来删除部分数据
偶遇需求,大表中需要删除部分数据.分批删除. declare TYPE type_table_rowid IS TABLE OF ROWID INDEX BY BINARY_INTEGER;table ...
- python数据可视化编程实战PDF高清电子书
点击获取提取码:3l5m 内容简介 <Python数据可视化编程实战>是一本使用Python实现数据可视化编程的实战指南,介绍了如何使用Python最流行的库,通过60余种方法创建美观的数 ...
- 90行代码让微信地球转起来,太酷了!(python实现)
1.微信地球 手机重启后打开微信的一瞬间,会看到一幅有名的图片,上面站着一个 张小龙 . 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. ...