CSS—换行

关于文本溢出换行问题，先看下涉及到换行的相关属性，查看：http://www.w3school.com.cn

定义：word-break 属性规定自动换行的处理方法。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

二、word-wrap

定义：word-wrap 属性允许长单词或 URL 地址换行到下一行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

用于非CJK文本(如英文)的换行规则，word-wrap：break-word，允许长单词换到下一行（拆分单词）。

CJK(Chinese/Japanese/Korean)(中文/日文/韩文)

三、white-space

定义： white-space 属性设置如何处理元素内的空白。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

四、应用场景

如果对上面的属性很了解那是极好的，如果不是很清楚也无妨，请看效果：演示效果，runjs

下面是截图：

1.默认情况

2.word-break: break-all

3.word-wrap: break-word

4.white-space: nowrap

五、结语

希望读到这里对您有所帮助，错误请指正，文章不定期更改或更新，转载请注明出处，方便溯源。

时间： 2024-08-24 05:51:03

CSS—换行的相关文章

CSS换行2

1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图换行说明图无间隔小换行样式-br使用 2.可以使用<p.>标签来实现大换行.如果在一个文章里需要分段换行形式,可以使用<p>标签来实现换行,但是需要注意的是p标签的用法. 大换行有间隔样式 3.可以使用CSS设置宽度自动换行.我们可以在一个div里,添加一个div并加入css样式,对加入的div设置对

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

CSS 换行知多少: word-wrap && word-break && white-space && word-spacing

word-wrap : 首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆: Reference: The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwis

CSS换行：word-wrap、word-break和text-wrap区别

一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持默认处理). 2.word-wrap: break-word:在长单词或 URL 地址内部进行换行.(即在容器末端有长单词不能完全显示,不会截断单词,而是作为整体,自动换行) 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <h

（转）css换行样式：word-wrap同word-break的区别

以下是引用片段: word-wrap:break-word; overflow:hidden; 而不是以下是引用片段: word-wrap:break-word; word-break:break-all; 也不是以下是引用片段: word-wrap:break-word; overflow:auto; 在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容. word-wrap同word-break的区别 word-wrap: normal Default. Content e

CSS换行1

1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象white-space:nowrap; } 自动换行 div{ word-wrap: break-word; //word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则,允许在字内换行word-break: normal; } 强制英文单词断行 div{w

网页中的CSS换行控制

在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: white-space : normal | pre | nowrap 取值: normal: 默认值.默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行 pre: 换行和其他空白字符都将受到保护.这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mod

css换行缩进

1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> <p style="font-size:16px;font-weight:bold;text-align:center;text-indent:-35px;margin-left:40px">提现政策</p> <p style="text-inden

CSS换行文本溢出显示省略号，多行

首先,div部分 1 <body> 2 <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div> 3 </body> 然后,css部分 1.单行 1 div { 2 width: 150px; 3 overflow: hidden; 4 text-overflow: ellipsis; 5 display: -webkit-box; 6 -webkit