div块级元素内文字换行word-wrap, word-break,white-space。



word-wrap: normal; || word-break: normal;

当word-wrap或者word-break为normal时,也就是浏览器的默认设置时。

换行规则是这样的:

    情景一:  当一个单词在行尾不能完整容纳时,会自动将这个单词换到下一行,示例如下。

          

    情景二:  当一个长长的单词在行尾不能完整容纳,并且换行后还是不能容纳时,单词就会溢出容器,示例如下。

          



word-wrap: break-word;

当word-wrap设置为break-word时,

换行规则如下:

     情景一: 和normal情况相同。

        

     情景二: 这时,单词不会溢出容器,而是单词断开,换到下一行。

             



word-break: break-all;

当word-break设置为break-all时,

换行规则如下:

     情景一: 这时,发生了变化。单词不会整体换行,而是断开单词,换到下一行。

        

    情景二: 这时,和之前相比,又发生了变化。单词还是不会整体换行,单词会不断的断开,换到下一行。

        



总结:

normal和break的区别在于:  单词是否会断开。normal不会断开单词,只会把单词整体换行或者溢出容器。而break会选择断开单词换行。

word-wrap和word-break的区别在于:  单词是否会整体换行。前者会整体换行再断开单词,而后者直接断开单词。



div块级元素内文字换行word-wrap, word-break,white-space。

时间: 2024-11-06 10:34:46

div块级元素内文字换行word-wrap, word-break,white-space。的相关文章

html 中的块级元素 内联元素

上一个礼拜,做crm项目,使用的大部分都是js,nodejs,ajax 的内容,但是今天我想写写关于html中的块级元素和内联元素 的东西. 首先,html 中的块级元素 内联元素 我们可以看到,这两个表格中有重复的元素,这些元素被称为可变元素 对于html中块级元素和行内元素,有什么区别呢? 块级元素会分行显示,行内元素是在同一行显示内容 具体区别如下:1.行内元素  在尺寸设置方面 设置它的宽,高,均无效 设置margin 值,左右的margin 值可以设置,上下的margin 值设置无效,

块级元素内联并列显示

inline-block<a>标签1</a><a>标签2</a><a>标签3</a>a标签本来就是内联 这样写,他出来效果就是--------标签1标签2标签3但如果你想要定义宽度,不加块状是起不来作用的,都是单单加块状(display:block),他又换行了,所以这时加display:inline-block 就起到很大作用,内联块状,宽度既能实现,又能不换行...a{width:100px; display:inline-blo

HTML元素分类:块级元素 内联元素和内联块状元素

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 什么是块级元素?在html中<div>. <p>.<

css块级元素,内联元素,内联块状元素

块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素显示为块级元素.如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行. 2.元素的高度,宽度,行高以及顶和底边距都可设置. 3.元素宽度在不设置的情况下,是它本身你窗口的100%(和你元素的宽度一致),除非设定一个宽

html中的行内元素与块级元素

块级元素(block element)      div -最常用的块级元素      dl - 和dt dd搭配使用的块级元素     form - 交互表单     h1 - 大标题    hr - 水平分隔线    ol - 排序表单   p - 段落   ul - 非排序列表 li- 也是块级元素 内联元素(inline element)a - 锚点b - 粗体(不推荐)br - 换行em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框labe

【转】那些年记不住的块级元素,内联元素

笔试时候,考基础什么的是最讨厌了 块级元素,内联元素总是记不全,总结如下 妈妈再也不用担心我记不住了 块级元素 内联元素 address - 地址block - 块引用center - 居中对齐块(不推荐)dir - 目录列表(HTML5踢出) div - 常用的不能再常用了 dl - 列表 fieldset - 一个包含着form组的框 form - 表了个单 h1 ~ h6 各种尺寸标题 hr - 水平分隔线(不推荐) menu - 菜单列表 noframes - 浏览器不支持frames显

块级元素及内联元素对margin、padding的态度

1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素或兄弟元素的边界时,才向相反方向延伸,这时会改变该元素中内容的位置 padding演示: 原样 html: <div>块级元素</div> css: div{ width:100px; border:1px solid #000; } 添加padding后: div{ width:100p

块级元素 Vs 内联元素

HTML的元素可以分为两种: 块级元素(block level element ) 内联元素(inline element ) 二者的区别如下: 1. 块级元素独占一行(除非显示修改元素的display属性),内联元素在一行内显示: 2. 块级元素可以设置width.height属性,而内联元素设置这些属性无效: 3. 块级元素的默认width为100%,而内联元素的的width是根据其内容或子元素确定的. 二者的相互转化: 块级元素——>内联元素:display:inline;    内联元素

常见的内联元素和块级元素

内联元素和块级元素 内联元素(行内元素)内联元素(inline element) a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q -