全国服务热线:4008-888-888

技术知识

CSS全自动换行、强制性不换行、强制性断行、超

P标识是默认设置是全自动换行的,因而设定好宽度以后,可以较好的完成实际效果,可是近期的新项目中发现,应用ajax载入数据信息以后,p标识内的內容沒有换行,致使合理布局紊乱,因而尝试着应用换行款式,尽管处理了难题,可是并沒有发现实质缘故,实质在于,我那时候获得的数据信息是1长串的数据,访问器应当是对数据和英文单词解决方法相仿,不容易断开。

先得出各种各样方法,再实际详细介绍每个特性。

强制性不换行:p { white-space:nowrap; }

全自动换行:p { word-wrap:break-word; }

强制性英文单词断行:p { word-break:break-all; }

*留意:设定强制性将英文单词断行,必须将行内元素设定为块级元素。

超过显示信息省略号:p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space 特性设定怎样解决元素内的空白
normal 默认设置。空白会被访问器忽视。
pre 空白会被访问器保存。其个人行为方法相近 HTML 中的 pre 标识。
nowrap 文字不容易换行,文字会在在同1行上再次,直至遇到 br 标识为止。
pre-wrap 保存空白符编码序列,可是一切正常地开展换行。
pre-line 合拼空白符编码序列,可是保存换行符。
inherit 要求应当从父元素承继 white-space 特性的值。

word-wrap: normal|break-word;

word-wrap 特性用来标出是不是容许访问器在单词内开展断句,这是以便避免当1个标识符串过长而找不到它的当然断句点时造成外溢状况。
normal: 只在容许的断字点换行(访问器维持默认设置解决)
break-word:在长单词或URL详细地址內部开展换行

word-break: normal|break-all|keep-all;

word-break 特性用来标出如何开展单词内的断句。
normal:应用访问器默认设置的换行标准。
break-all:容许再单词内换行
keep-all:只能在半角空格或连标识符处换行

举例看起差别:

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3.     <head>  
  4.     <!--网站编号文件格式,UTF⑻ 国际性编号,GBK或 gb2312 汉语编号-->  
  5.         <meta http-equiv="content-type" content="text/html;charset=utf⑻" />  
  6.         <meta name="Keywords" content="重要词1,重要词2">  
  7.         <meta name="Description" content="网站叙述內容">  
  8.         <meta name="Author" content="Yvette Lau">  
  9.         <title>Document</title>  
  10.         <!--css js 文档的引进-->  
  11.         <style>  
  12.             .word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}   
  13.             /* 强制性不换行 */   
  14.             .nowrap{white-space:nowrap;}   
  15.             /* 容许单词内断句,最先会尝试移到下1行,看看下1行的宽度够不足,   
  16.             不足的话就开展单词内的断句 */   
  17.             .breakword{word-wrap: break-word;}   
  18.             /* 断句时,不容易把长单词移到下1行,而是立即开展单词内的断句 */   
  19.             .breakAll{word-break:break-all;}               
  20.             /* 超过一部分显示信息省略号 */   
  21.             .ellipsis{text-overflow:ellipsis;overflow:hidden;}   
  22.         </style>  
  23.     </head>  
  24.     <body>  
  25.         <div class = "word">  
  26.             <p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>             
  27.             <p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>  
  28.             <p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>  
  29.             <p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>  
  30.             <p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>  
  31.         </div>  
  32.     </body>  
  33. </html>  

实际效果以下:

以上便是本文的所有內容,期待对大伙儿娴熟把握CSS换行、断行、省略号完成有一定的协助。

原文详细地址:http://blog.csdn.net/liuyan19891230/article/details/50969393



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服