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.
2.
标签来实现换行
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; 所有内容都强制在同一行中显示。(遇到
除外)
normal 默认。空白和换行字符串会被浏览器忽略。
pre 保留空格和换行,容器边界不自动换行。和HTML标签
类似- 保留原字符串样子。
pre-wrap 保留空格和换行,容器边界自动换行。
pre-line 与pre-wrap区别:多个空格合并成一个空格(注意:行首不保留空格)
注意:不管什么值,
都会换行。
css换行缩进
1.换行缩进
× ...
精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
HTML段落,换行,字符实体
HTML段落,换行,字符实体 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——段落处理