Css文字换行、溢出、对齐

文字换行

         强制换行：纯数字或者纯字母时，该字符被认为是一个字符，因此不会自动换行，如果父容器的宽度不够，便会超出父容器的限制。

           解决方案： 设置自动换行

                          a、 word-break   规定非中日韩文字的换行规则

                                

                            word-break: normal  只在允许的断字点换行（浏览器保持默认处理）。

                            word-break: break-all / break-word 允许在长字符内换行

                            word-break: keep-all 只能在半角空格或连字符处换行 

  

                          兼容性 ： 各大主流浏览器都兼容   

                            a、 word-wrap  属性规定自动换行的处理方法 

                                              

                        word-wrap: normal  只在允许的断字点换行（浏览器保持默认处理）。

                         word-wrap : break-word   允许在长字符内换行

 

                          兼容性 ： 各大主流浏览器都兼容    

         强制不换行： 文本不是很长的字符串时，在到边界值时中日韩文字会自动换行，只需要一行显示时可以让其强制不换行。

         

         解决方案：设置 white-space：nowrap

         

                           white-space属性是处理

文本溢出

          文本溢出处理属性为  text-overflow

          text-overflow：clip   只是在边界值截断文本隐藏

          text-overflow：ellipsis  超出边界的文本用“...”代替

            单行显示溢出部分用“...”代替，如果文本的容器是行级元素，如span 、i 等需要将其设置为块级元素，再设置容器宽度、强制文本不换行、容器隐藏属性

         

            

     span{
           display: block;
           width: 100%;
           white-space: nowrap;  /* 强制不换行 */
           overflow: hidden;
           text-overflow: ellipsis;
         }

         

         如果需要两个span同时溢出时“...”，并且显示在同一行不妨设置 display：inline-block; width:49%;      

文本对齐

          水平对齐：水平对齐主要说一下 justify

                        text-align:justify;     如果文本内容一行显示不下，该对齐方式可以是文本内容与父容器两端边界对齐；

                        使用：在中韩日文字文本可以处理段落层次不齐的问题

                        弊端：非中日韩文字，文字过长会到各种无法预料的呈现方式。

                        原因：在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。