Home > Web Front-end > HTML Tutorial > CSS-换行_html/css_WEB-ITnose

CSS-换行_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:40
Original
1161 people have browsed it

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

一、word-break

定义: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 中的
 标签。
Copy after login
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 

 

 

 

 

 

 

 

 

 

四、应用场景

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

下面是截图:

1.默认情况

 

2.word-break: break-all

 

3.word-wrap: break-word

 

4.white-space: nowrap

五、结语

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template