Heim > Web-Frontend > HTML-Tutorial > CSS-换行_html/css_WEB-ITnose

CSS-换行_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:27:40
Original
1160 Leute haben es durchsucht

关于文本溢出换行问题,先看下涉及到换行的相关属性,查看: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 中的
 标签。
Nach dem Login kopieren
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 

 

 

 

 

 

 

 

 

 

四、应用场景

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

下面是截图:

1.默认情况

 

2.word-break: break-all

 

3.word-wrap: break-word

 

4.white-space: nowrap

五、结语

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage